手把手教你，如何在小程序上面画地图的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对数据赋值就好了