迷你马拉松线路规划，前端，lbs

我设计了迷你拉松路线规划工具。在微信小程序里，使用qqmap-wx-jssdk.js接口，通过在地图上加入途径的坐标，把每个节点串成一个完整的线路。

同时用POI在点击的时候显示每个节点真实的地名，并计算总路程。

首先要定义初始变量和onLoad函数

var app = getApp();
const QQMapWX = require('../../../../we7/js/qqmap-wx-jssdk.js');
var qqmapsdk;Page({data: {banner: [],url: [],navTile: "创建线路",curIndex: 0,nav: ["组队中", "已组队"],curList: [],oldList: [],page: 1,oldpage: 1,group: [1],usrgroup: [1, 2, 3],lat: 28.65857270312306,lng: 121.41610499450682,markers: [],teamnum:[3,4,5,6,7,8,9,10],objectteamnum: [{id: 3,name: '3人'},{id: 4,name: '4人'},{id: 5,name: '5人'},{id: 6,name: '6人'},{id: 7,name: '7人'},{id: 8,name: '8人'},{id: 9,name: '9人'},{id: 10,name: '10人'},],index: 0,time: '18:00',longitude:0,latitude:0,multiIndex: [0, 0, 0],polyline:[],pointer: [{num: 0,key: 0,color: 'none'}],node:[],beforenode:0,pl:[],distance:[],address:'',finish_line:''},onLoad: function(t) {var a = this;wx.setNavigationBarTitle({title: a.data.navTile});},

为了突出重点我省略了表单提交部分代码，直奔主题

//  qqmap api 加入坐标
putdot(e) {var that = thisthat.mapCtx = wx.createMapContext("map4select");that.mapCtx.getCenterLocation({type: 'gcj02',success: function(e) {//放入坐标点位var markers = {iconPath: "/style/images/mapine.png",id: that.data.markers.length,latitude: e.latitude,longitude: e.longitude,width: 35,height: 35}//创建路径qqmapsdk = new QQMapWX({key: '我的api密钥'});// 只能在市民广场范围内5公里的跑步qqmapsdk.calculateDistance({from: '28.65857270312306,121.41610499450682' || '',to: e.latitude + ',' + e.longitude, //终点坐标success: function (res) {//成功后的回调var res = res.result;var dis = [];for (var i = 0; i < res.elements.length; i++) {dis.push(res.elements[i].distance); //将返回数据存入dis数组，}var long = that.formatDistance2(dis[0])console.log(long)if(long>3){wx.showToast({title: '圆圈内选择线路',icon: '',image: '',duration: 1000,mask: true,success: function(res) {that.setData({circles: [{latitude: 28.65857270312306,longitude: 121.41610499450682,color: '#78daf5',fillColor: '#ffffff00',radius: 2600, //定位点半径strokeWidth: 1}],})},fail: function(res) {},complete: function(res) {},})return}else{}var pl = that.data.plvar latitude=that.data.latitudevar longitude=that.data.longitudeif(latitude){that.aquadrs2(e)qqmapsdk.direction({mode: 'walking',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填//from参数不填默认当前地址from: latitude+','+longitude,to: e.latitude + ',' + e.longitude, //终点坐标success: function (fe) {console.log(12345)console.log(fe);var distance=that.data.distancedistance.push(fe.result.routes[0].distance)//   合计距离var distancesum=that.sum(distance)/1000var ret = fe;var coors = ret.result.routes[0].polyline, pl = that.data.pl,node=that.data.node;//坐标解压（返回的点串坐标，通过前向差分进行压缩）var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({ latitude: coors[i], longitude: coors[i + 1] })}var beforenode=that.data.beforenodevar afternodeif(beforenode&&node!=''){afternode=pl.lengthnode.push(pl.length-beforenode)}else{afternode=pl.lengthnode.push(pl.length)}console.log(pl)//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点that.setData({latitude:pl[pl.length-1].latitude,longitude:pl[pl.length-1].longitude,polyline: [{points: pl,color: '#FF0000DD',arrowLine:true,width: 5}],node:node,pl:pl,beforenode:afternode,distance:distance,distancesum:distancesum})},fail: function (error) {console.error(error);},});}else{that.aquadrs(e)that.setData({latitude:e.latitude,longitude:e.longitude})}console.log(that.data.markers)that.data.markers.push(markers)that.setData({markers: that.data.markers,})},});}})//console.log(that.data.pointer)},

从上往下说明，putdot（放置坐标点），makers（坐标点对象），calculateDistance（线路只能在市民广场5公里范围内进行），dis（距离），formatDistance2（计算公里数），long>3（超过范围，绘制圆圈提示），latitude（获取初始经纬度，如果非空开始规划路线），aquadrs2（获取终点地址），walking（选择的是步行计算方式）  ，e.latitude和e.longitud（获得的坐标），distance（初始化距离，数组每个元素都是一段距离），distancesum（计算总长度），pl（已有的路径），node（每次路径的节点数存入数组），coors（最新的路径），pl.push（新路径的传入数组），beforenode（之前的节点长度），afternode（之后的节点长度，如果beforenode为空就进行），pl.length-beforenode（当前路径的节点数量），setData（把最新的经纬度保存一下，设置路径，node每个节点长度的数组，路径的数组，用新的afternode替换beforenode，distance每段距离的数组，distancesum距离的统计数值）

else里，latitude（确定起点坐标），aquadrs（获取起点的地址名称），markers（一开始回调得到的定位），that.data.markers（默认坐标）

补充撤销操作函数

  sum(arr){var a=0for(var s in arr){a+=arr[s]}console.log(a)return a},
//   获取起点地址aquadrs(e) {var _this = this;qqmapsdk.reverseGeocoder({location: e.latitude + ',' + e.longitude || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式//get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数success: function(res) {//成功后的回调console.log(res);var res = res.result;var mks = [];mks.push({ // 获取返回结果，放到mks数组中title: res.address,id: 0,latitude: res.location.lat,longitude: res.location.lng,iconPath: '/style/images/5.png',//图标路径width: 20,height: 20,//   callout: {//     content: res.address,//     color: '#000',//     display: 'ALWAYS'//   }});_this.setData({ //设置markers属性和地图位置poi，将结果在地图展示markers: mks,address:res.address,poi: {latitude: res.location.lat,longitude: res.location.lng}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})},//   获取地址aquadrs2(e) {var _this = this;qqmapsdk.reverseGeocoder({location: e.latitude + ',' + e.longitude || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式//get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数success: function(res) {//成功后的回调console.log(res);var res = res.result;var mks = [];mks.push({title: res.address,id: 0,latitude: res.location.lat,longitude: res.location.lng,iconPath: '/style/images/hklogo.png',width: 20,height: 20,});_this.setData({ //设置markers属性和地图位置poi，将结果在地图展示//   markers: mks,finish_line:res.address,poi: {latitude: res.location.lat,longitude: res.location.lng}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})},undo2(){var that=this//start deletenumber splice//start end slicevar node = that.data.nodethat.data.markers.splice(-1)that.data.pl.splice(-node[node.length-1])that.data.node.splice(-1)that.data.distance.splice(-1)//node和pl同时清空,marker点比他们多一个，所以最后起始点应该再撤销一次console.log('undo '+node[node.length-1])that.setData({node: that.data.node,polyline: [{points: that.data.pl,color: '#FF0000DD',arrowLine:true,width: 5}],markers: that.data.markers,distance:that.data.distance})console.log(that.data.markers.length-1)//marker点比路径数组多一个值if(that.data.markers.length>0){that.setData({latitude:that.data.markers[that.data.markers.length-1]['latitude'],longitude:that.data.markers[that.data.markers.length-1]['longitude']    })}else{that.setData({latitude:0,longitude:0})}},formatDistance(num) {if (num < 1000) {return num.toFixed(0) + 'm';} else if (num > 1000) {return (num / 1000).toFixed(1) + 'km';}},formatDistance2(num) {return (num / 1000).toFixed(1)}
});

通过修改markers,pl,node规划路线