微信小程序 - 输入起点、终点获取距离并且进行路线规划（腾讯地图）

更新：

2018-9-19 腾讯官方经纬度转详细地址，详细地址转经纬度

index.wxml

<!--地图容器-->
<map id="myMap" style="width: 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='{{scale}}' polyline="{{polyline}}" markers="{{markers}}" covers="{{covers}}" show-location></map>

起点：<input placeholder='请输入起点' bindinput='getStart'></input>
终点：<input placeholder='请输入终点' bindinput='getEnd'></input>

两点之间的距离：{{resultDistance}}

<!--绑定点击事件-->
<button bindtap="driving" disabled='{{openNav}}'>开始导航</button>

　　

index.wxss

input{
  border: 1px solid #aaa;
}

　　

index.js

 // let coors;
 // // 引入SDK核心类
 let QQMapWX = require('./qqmap-wx-jssdk.min.js');

 // 实例化API核心类
 let qqmapsdk = new QQMapWX({
   key: '填写地图key'
 });

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     openNav: true
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
     let _page = this;

     wx.getLocation({
       type: 'gcj02', //返回可以用于wx.openLocation的经纬度
       success: function (res) {
         _page.setData({
           latitude: res.latitude,
           longitude: res.longitude,
           scale: 10
         });
       }
     })
     wx.clearStorageSync('latlngstart');
     wx.clearStorageSync('latlngend');
   },

   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {

   },

   /**
    * 起点
    */
   getStart(e) {
     let _page = this;

     /**
      * 修改：以前示例(2018-09-15)地址转经纬度用错接口了
      */
 56     qqmapsdk.getSuggestion({
 57       keyword: e.detail.value,
 58       success: function (res) {
 59         let lat = res.data[0].location.lat;
 60         let lng = res.data[0].location.lng;
 61
 62         wx.setStorageSync('latlngstart', {
 63           lat: lat,
 64           lng: lng
 65         });
 66       },
 67       fail: function (res) {
 68         console.log(res);
 69       },
 70       complete: function (res) {
 71         console.log(res);
 72       }
 73     });

     /**
      * 修改为（2018-09-19）
      */

 80     qqmapsdk.geocoder({
 81       address: res.address,
 82       success: function(res) {
 83         let lat = res.result.location.lat;
 84         let lng = res.result.location.lng;
 85         wx.setStorageSync('latlngendSend', {
 86           lat: lat,
 87           lng: lng
 88         });
 89
 90         // 起点经纬度
 91         let latStart = wx.getStorageSync('latlngstartSend').lat;
 92         let lngStart = wx.getStorageSync('latlngstartSend').lng;
 93
 94         // 终点经纬度
 95         let latEnd = wx.getStorageSync('latlngendSend').lat;
 96         let lngEnd = wx.getStorageSync('latlngendSend').lng;
 97
 98         qqmapsdk.calculateDistance({
 99           to: [{
100             latitude: latStart,
101             longitude: lngStart
102           }, {
103             latitude: latEnd,
104             longitude: lngEnd
105           }],
106           success: function(res) {
107             console.log(res, '两点之间的距离(代送)：', res.result.elements[1].distance);
108             wx.setStorageSync('kmSend', res.result.elements[1].distance + "");
109           }
110         });
111       }
112     });
 

     // 如果输入地点为空：则不规划路线
     if (e.detail.value == '') {
       _page.setData({
         openNav: true,
         resultDistance: ''
       });
     } else {
       _page.setData({
         openNav: false
       });
     }
   },

   /**
    * 终点
    */
   getEnd(e) {
     let _page = this;
     // 输入地点获取经纬度,我取得是数据的第一条数据.
     qqmapsdk.getSuggestion({
       keyword: e.detail.value,
       success: function (res) {
         let lat = res.data[0].location.lat;
         let lng = res.data[0].location.lng;

         wx.setStorageSync('latlngend', {
           lat: lat,
           lng: lng
         });
       },
       fail: function (res) {
         console.log(res);
       },
       complete: function (res) {
         console.log(res);
       }
     });
     // 如果输入地点为空：则不规划路线
     if (e.detail.value == '') {
       _page.setData({
         openNav: true,
         resultDistance: ''
       });
     } else {
       _page.setData({
         openNav: false
       });
     }
   },
   //事件回调函数
   driving: function () {

     let _page = this;

     // 起点经纬度
     let latStart = wx.getStorageSync('latlngstart').lat;
     let lngStart = wx.getStorageSync('latlngstart').lng;

     // 终点经纬度
     let latEnd = wx.getStorageSync('latlngend').lat;
     let lngEnd = wx.getStorageSync('latlngend').lng;

     _page.setData({
       latitude: latStart,
       longitude: lngStart,
       scale: 16,
       markers: [{
         id: 0,
         latitude: latStart,
         longitude: lngStart,
         // 起点图标
         iconPath: '../image/location.png'
       },
       {
         id: 1,
         latitude: latEnd,
         longitude: lngEnd,
         // 终点图标
         iconPath: '../image/location.png'
       },
       ]
     });
     ``

     /**
      * 获取两点的距离
      */
     qqmapsdk.calculateDistance({
       to: [{
         latitude: latStart,
         longitude: lngStart
       }, {
         latitude: latEnd,
         longitude: lngEnd
       }],
       success: function (res) {
         console.log(res, '两点之间的距离：', res.result.elements[1].distance);
         _page.setData({
           resultDistance: res.result.elements[1].distance + '米'
         });
       },
       fail: function (res) {
         console.log(res);
       },
       complete: function (res) {
         console.log(res);
       }
     });

     //网络请求设置
     let opt = {
       //WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填
       url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${latStart},${lngStart}&to=${latEnd},${lngEnd}&key=${qqmapsdk.key}`,
       method: 'GET',
       dataType: 'json',
       //请求成功回调
       success: function (res) {
         let ret = res.data
         if (ret.status != 0) return; //服务异常处理
         let coors = ret.result.routes[0].polyline,
           pl = [];
         //坐标解压（返回的点串坐标，通过前向差分进行压缩）
         let kr = 1000000;
         for (let i = 2; i < coors.length; i++) {
           coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
         }
         //将解压后的坐标放入点串数组pl中
         for (let i = 0; i < coors.length; i += 2) {
           pl.push({
             latitude: coors[i],
             longitude: coors[i + 1]
           })
         }
         //设置polyline属性，将路线显示出来
         _page.setData({
           polyline: [{
             points: pl,
             color: '#FF0000DD',
             width: 4
           }]
         })
       }
     };
     wx.request(opt);
   }
 })

 示例下载：点击下载