微信小程序腾讯地图组件的使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

最近一直在开发微信小程序，小程序涉及到地图展示，所以和大家分享下地图组件的实例到项目应用，该地图组件涉及到路径和各个点位的图标以及缩放展示。（腾讯地图比较兼容小程序毕竟是两者是一家）

引入map组件

<map id="home_map" class="home_map" latitude="{{latitude}}" scale="16" markers="{{markers}}" longitude="{{longitude}}" bindmarkertap="getMapInfo">
  <cover-view class="dingwei" bindtap="setMapCenter">
    <cover-image class="dingwei_img" src="/img/dingwei.png"></cover-image>
  </cover-view>
</map>

id当前地图组件的id； markers为经纬度（位置）数组类型； longitude和latitude为当前位置； bindmarkertap为点击位置点后的操作方法； scale放大缩小多少倍；

渲染地图组件的方法

1.首先要通过wx.createMapContext方法创建地图组件；

2.markers是当前地图组件的具体位置信息 longitude和latitude经度和维度；

3.for循环里是为了适配地图显示信息处理需要的数据 比如：位置图标，图标大小等。。。；

4.mapCtx.includePoints缩放视野，把所有的坐标进行展示

注意：markers数据 必须要有id，latitude，longitude

showMap(markers) {
    var that = this;
    this.mapCtx = wx.createMapContext('home_map');
    for (var i in markers) {
      markers[i].bId = markers[i].id
      markers[i].id = Number(i)
      markers[i].width = 54
      markers[i].height = 54
      markers[i].latitude = Number(markers[i].lat)
      markers[i].longitude = Number(markers[i].lng)
      delete markers[i].lat
      delete markers[i].lng
    }
    that.setData({
      markers,
    });
    that.mapCtx.includePoints({
      points: markers,
      padding: [50, 50, 50, 50]
    })
  },

具体markers数据格式

注意：数据格式仅供参考

 var markerList = [{
        id: 1,
        lat: "49.828921",
        lng: "122.956163",
        lastTemp: 29.2,
        status: '10',
      },
      {
        id: 2,
        lat: "39.898959",
        lng: "116.188584",
        lastTemp: 19.2,
        status: '00',
      },
      {
        id: 3,
        lat: "29.828457",
        lng: "120.495225",
        lastTemp: 29.3,
        transportType: '40',
        status: '10',
      },
      {
        id: 4,
        lat: "21.358161",
        lng: "111.003038",
        lastTemp: 29.5,
        status: '20',
      },
      {
        id: 5,
        lat: "38.948484",
        lng: "120.846788",
        lastTemp: 29.8,
        status: '10',
      },
      {
        id: 6,
        lat: "33.785733",
        lng: "104.850694",
        lastTemp: 28.2,
        status: '00',
      },
      {
        id: 7,
        lat: "29.225357",
        lng: "121.306968",
        lastTemp: 27.2,
        status: '00',
      }]
      this.showMap(markerList)

bindmarkertap方法的使用

bindmarkertap有一个evnet回调参数 通过event可以获取当前点击的位置坐标获取当前的坐标里的所有信息，为此可以进行一些列的操作比如：通过获取点击坐标系id获取详情等。。

右下角定位方法使用

通过 mapCtx.includePoints缩放视野把地图所有经纬度展示出来 padding是上下左右的边距

    var locations = that.data.markers;
    that.mapCtx.includePoints({
      points: locations,
      padding: [50, 50, 50, 50]
    })

总结

非常简单的一个实例分享，刚开始由于不熟悉踩了很多坑，所以避免大家浪费时间所以分享我的开发经过（不是最终版本，仅供参考）效果图如下：