微信小程序 - 輸入起點、終點獲取距離並且進行路線規划（騰訊地圖）

 

 

更新：

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 }); 113 


    // 如果輸入地點為空：則不規划路線
    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);
  }
})

 

 

 

 

 示例下載：點擊下載