微信小程序实现路径规划

通勤助手小程序使用了线路规划这一功能,借助腾讯地图的

WebService API中的路线规划服务和划线可实现这一功能。index.wxml文件如下,点击路线形成规划图。index.js文件如下

  1. <map  id="map"  polyline="{{polyline}}" markers="{{markers}}" include-points="{{markers}}" style="width: 100%; height: 700rpx;" ></map>

  2. <button bindtap="end">路线</button>

    index.js文件如下


    1. var coors

    2. var that2

    3. Page({

    4.  data: {

    5.    polyline: [],

    6.    markers: [{

    7.      iconPath: "mark.png",      

    8.      latitude: 23.362490,

    9.      longitude: 116.715790,

    10.      width: 25,

    11.      height: 25

    12.    },

    13.      {

    14.        iconPath: "mark.png",

    15.        latitude: 23.37228,

    16.        longitude: 116.75498,

    17.        width: 25,

    18.        height: 25

    19.      }],

    20.  },

    21.  onReady: function () {

    22.    that2 = this

    23.    wx.request({

    24.      url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO',

    25.      success: function (res) {

    26.        coors = res.data.result.routes[0].polyline

    27.        for (var i = 2; i < coors.length; i++)

    28.        { coors[i] = coors[i - 2] + coors[i] / 1000000 }

    29.        console.log(coors)

    30.      }

    31.    })

    32.    },

    33.  end: function () {

    34. var b=[]

    35.    for (var i = 0; i < coors.length; i=i+2)

    36. {

    37.      b[i / 2] = {

    38.        latitude: coors[i],longitude:coors[i+1]}

    39.  console.log(b[i/2])

    40. }

    41. console.log(b.length)

    42.  that2.setData({

    43.    polyline: [{

    44.      points: b,

    45.      color: "#99FF00",

    46.      width: 4,

    47.      dottedLine: false

    48.    }],

    49.  })

    50. }

    51. })

    定义两点坐标并mark标注,通过api获取路径规划路线,返回的压缩后的经纬度,解压缩后出现成对的经纬度,再转换为polyline划线的格式。



阅读更多

没有更多推荐了,返回首页