微信小程序--map路线规划

• 小程序map组件 实现地图显示

<view class="wrapper">
  <map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" polyline="{{polyline}}" enable-traffic></map>
  <view class="input">
    <input type="text" bindinput="getInputValue"></input>
    <view class="ok" bindtap="serach">确认</view>
  </view>
</view>

• 获取用户当前位置坐标

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
  key: 'ZBLBZ-S7Q6U-VTZVB-2FCL7-S223O-CTFX2' // 必填
});
import gcoord from '../../utils/gcoord.js';

 //1、获取当前位置坐标
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var result = gcoord.transform(
          [res.longitude, res.latitude], // 经纬度坐标
          gcoord.WGS84, // 当前坐标系
          gcoord.GCJ02);

        //2、根据坐标获取当前位置名称
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: result[1],
            longitude: result[0]
          },
          success: function(addressRes) {
            var address = addressRes.result.formatted_addresses.recommend;
            // console.log(addressRes)
            that.setData({
              longitude: addressRes.result.location.lng,
              latitude: addressRes.result.location.lat,
              markers: [{  //当前位置标注点
                iconPath: "../images/mpa-icon.png",
                id: 0,
                latitude: addressRes.result.location.lat,
                longitude: addressRes.result.location.lng,
                width: 50,
                height: 50
              }],
              city: addressRes.result.address_component.city //当前所在城市
            })
          },
          fail: function(res) {
            console.log(res)
          }
        })
      }
    })

• 获取目的地 并 把位置转换成经纬度坐标

let that = this
qqmapsdk.geocoder({
  address: this.data.city + this.data.address,
  complete: res => {
    console.log(res); //经纬度对象
    that.dispose(res)  //处理路径函数
  }
})

• 获取并处理路径(经纬度数组)

dispose: function(res) {
    let that = this,
      pl = [];
    qqmapsdk.direction({  //获取路径
      from: {
        latitude: that.data.latitude,
        longitude: that.data.longitude
      },
      to: {
        latitude: res.result.location.lat,
        longitude: res.result.location.lng
      },
      complete: res => {
        console.log(res)
        var coors = res.result.routes[0]['polyline'];
        for (var i = 2; i < coors.length; i++) {
          coors[i] = coors[i - 2] + coors[i] / 1000000
        }
        console.log(coors)
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({
            latitude: coors[i],
            longitude: coors[i + 1]
          })
        }
        console.log(pl)
        that.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      }
    })
  }

最后点击确认的结果