微信小程序使用腾讯地图—路线规划

想要使用腾讯地图，首先要在腾讯地图开发平台先注册账号，申请key腾讯地图开放平台，具体的申请流程不详述了，有需要的自行百度，重点讲一下使用微信小程序原生组件map，配合腾讯地图的一些api来实现路线规划功能。

重点：需要自己去看原生map组件的一些属性和方法。

效果图如下：

// html部分

js代码

var coors;
Page({
  data: {
    polyline: [],
    markers: [{
        latitude: 23.362490,
        longitude: 116.715790,
        iconPath:'../../assets/images/icon_start.png',width:48,height:48,
        anchor:{x:0.4,y:0.5}
      },
      {
        latitude: 23.37228,
        longitude: 116.75498,
        iconPath:'../../assets/images/icon_end.png',width:48,height:48,
        anchor:{x:0.45,y:0.5}
      }
    ],
    longitude: '116.715790',
    latitude: '23.362490'

  },
  onLoad: function (options) {
    wx.request({
      url: 'https://apis.map.qq.com/ws/direction/v1/bicycling/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=' + 'SSSBZ-SQZK6-U3XSL-EPA5P-6VNK6-ANF4P',
      success: function (res) {
        coors = res.data.result.routes[0].polyline;
        //解压
        for (var i = 2; i < coors.length; i++) {
          coors[i] = coors[i - 2] + coors[i] / 1000000;
        }
        console.log(coors)

        //划线 
        var b = [];
        for (var i = 0; i < coors.length; i = i + 2) {
          b[i / 2] = {
            latitude: coors[i],
            longitude: coors[i + 1]
          };
          console.log(b[i / 2])
        }
        this.setData({
          polyline: [{
            points: b,
            color: "#5996FF",  //线的颜色
            width: 4,
            dottedLine: false,
          }]
        })
      }
    })
  },
});