迷你马拉松线路规划，前端，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 = this
    that.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.pl
                var latitude=that.data.latitude
                var longitude=that.data.longitude
                
                if(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.distance
                          distance.push(fe.result.routes[0].distance)
                        //   合计距离
                          var distancesum=that.sum(distance)/1000
                          var 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.beforenode
                          var afternode
                          if(beforenode&&node!=''){
                            afternode=pl.length
                            node.push(pl.length-beforenode)
                          }else{
                            afternode=pl.length
                            node.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=0
    for(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 slice
    var node = that.data.node
    that.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规划路线