手把手教你，如何在小程序上面画地图的polyline

最终效果

做这个之前需要很多前戏，比如申请腾讯地图key和用户定位、引入qqmap-wx-jssdk.js等
这些小儿科前戏就不在这里说了，主要说一下怎么划线的

第一步建好对应文件之后，引入Map插件

对地图进行绑定ID和设置宽高
id很有用的比如点击某个按钮回到当前定位，通过moveToLocation什么的

对地图的参数进行赋值

setting、markers、polyline、longitude、latitude 等
具体介绍请点击查看 微信开放文档 这里重点介绍 polyline

简介polyline

polyline 是数组套对象，每一个对象代表一个线

微信文档

[{
      points: targetData.AtLastLineList,//是一个数组形式的坐标点[{lat,log}]
      color:"#FA6400",//线条的颜色
      width: 10,//宽度
      arrowLine: true,//是否带箭头
      borderWidth:2//线的边框宽度，还有很多参数，请看文档 
    }]

points是需要进行解析的
下面是我封装了一个解析points和距离等的一个方法

该方法接收两个参数，from和to就是线的起始位置和结束位置，通过promise返回二次处理过后的数据
对routes的polyline数据进行解析，得到最终画的线

//获取位置坐标，距离，和路线
export const getLine= {
  getLine:(from,to)=>{
    return new Promise((resolve,rej)=>{
      let url=`https://apis.map.qq.com/ws/direction/v1/driving/?from=${from.latitude},${from.longitude}&to=${to.latitude},${to.longitude}&output=json&key=自己申请的腾讯地图官方key`
      wx.request({
        url: url,
        method: 'get',
        success(res) {
          let coors = res.data.result.routes[0].polyline
              for (var i = 2; i < coors.length; i++)
              { coors[i] = coors[i - 2] + coors[i] / 1000000 }
              let coors_new = [];  
              for(var j = 0; j < coors.length; j++){
                  coors_new.push({
                  latitude: parseFloat(coors[j]),
                  longitude: parseFloat(coors[j+1])
                })
                j++;
              } 
              res.AtLastLineList=coors_new
              resolve(res)
        }})
    })
  }
}

到这里一条完美的线就算画完了

小蓝点需要在setting里面的showLocation设置为true

我上面的取和送是通过markers进行的标注，把后端给的数据进行循环生成markers，然后setState对数据赋值就好了