今天把地图资源的页面做完了，来回忆回忆一些坑。

首先，使用组件<map></map>就可以引用腾讯地图了，没错，就是辣么简单。

<map>组件中有许多的属性、方法。如果你想在地图标记某些位置，不妨使用“markers”标记点进行标记，可以自定义标记点的图标样式，还可以显示气泡，或者点击图标时显示气泡。

粉红色的框是callout气泡，可以选择点击的时候出现或者总是出现；红色的是label，它们都是markers中的。目前我所了解在callout中无法添加图片，只能是字符串。

代码

1.map.wxml

<map 
  id="map"
  longitude="108.31343"
  latitude="22.83393"
  show-location
  markers='{{markers}}'
  bindmarkertap="markertap"
  >
</map>

2.map.wxss

Page({
  data: {
    markers:[
      {
        iconPath: '../../../image/car.png',
        id: 1,
        longitude: 108.31733,
        latitude: 22.83788,
        width: 30,
        height: 40,
        callout: {
          content:'我是点击气泡哈哈',
          color: "#000000",
          fontSize: 16,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 20,
          display: "BYCLICK"
        },
        label: {
          content: '我是标记',
          color: '#ff0000',
          fontSize: 14,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 5

        }
      },
     
    ],
    
  },

markertap(){},

})

未完，待续。。

下班了

啊哈哈哈， 我又回来了

时间：晚上九点。每次下班回到家弄完杂七杂八的东西后都是九点，看看之前写的内容，发现跟不上思路了╮(╯▽╰)╭

算了，那就记录记录现在想到的东西

注意：markers必须是数组，是对象的话不起作用

wx.request({
          url: app.url + '接口略',
          data: {
            lag: res.latitude,
            lng: res.longitude,
          },
          method: 'GET',
          success: function (res) {
            console.log(res.data.data);
            var array = res.data.data;
            var list = [];
            for (var i = 0; i < array.length; i++) {
              //从接口取出来的是字符串，要变成数字
              var lat = Number(array[i].school_latlng[0]);
              var lon = Number(array[i].school_latlng[1]);
              list[i] = {
                iconPath: '../../../image/car.png',
                id: array[i].id,
                longitude: lon,
                latitude: lat,
                width: 30,
                height: 40,
                callout: {
                  content:array[i].school_name,
                  color: "#000000",
                  fontSize: 16,
                  borderRadius: 10,
                  bgColor: "#ffffff",
                  padding: 20,
                  display: "BYCLICK"
                },
                label:{
                  content:array[i].school_name,
                  color:'#ff0000',
                  fontSize:14,
                  borderRadius:10,
                  bgColor:"#ffffff",
                  padding:5

                }
              }
            }

            that.setData({
              markers: list
            })

            console.log(that.data.markers);
          }

        })

由于markers中的气泡不支持图片显示，故弃用。使用"cover-view"来替代callout做弹出

cover-view是覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button

<map markers="{{markers}}" bindmarkertap="markertap">
    <cover-view wx:if="{{showModal}}">
        <cover-view>我是气泡弹出啊哈哈哈~</cover-view>
        <cover-image src=""><cover-image>
    </cover-view>
</map>

在map中使用cover-view，结合markers绑定的函数bindmarkertap，点击标记点时触发，会返回marker的id，即可做出气泡弹出。

对了，还有一个坑。markers中的 iconPath文档上说是支持网络图片，但是你需要通过wx.downloadFile接口下载得到临时地址，也就是每个图片都需要download，太消耗性能了。故不推荐在iconPath时使用网络图片，而是使用本地图片。那么问题就来了，如果想给每个位置自定义不一样的图标样式怎么办？对不起，办不到，改需求，谢谢~

-------------分割线--------------------------------------------

当我写完，想看看代码还有什么值得补充的时候，电脑重启了

微笑.jpg  于是我凭借记忆又写了一遍，

微信开发者工具超级喜欢和我的笔记本起冲突造成重启，破编辑器