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

 

 

更新：

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

 

 

 

 

 示例下載：點選下載