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

  1 // let coors;
  2 // // 引入SDK核心類
  3 let QQMapWX = require(‘./qqmap-wx-jssdk.min.js‘);
  4 
  5 // 實例化API核心類
  6 let qqmapsdk = new QQMapWX({
  7   key: ‘填寫地圖key‘
  8 });
  9 
 10 Page({
 11 
 12   /**
 13    * 頁面的初始數據
 14    */
 15   data: {
 16     openNav: true
 17   },
 18 
 19   /*
 
*
 20    * 生命周期函數--監聽頁面加載
 21    */
 22   onLoad: function(options) {
 23     let _page = this;
 24 
 25     wx.getLocation({
 26       type: ‘gcj02‘, //返回可以用於wx.openLocation的經緯度
 27       success: function(res) {
 28         _page.setData({
 29           latitude: res.latitude,
 30           longitude: res.longitude,
 31           scale: 10
 32         });
 33       }
 34     })
 35     wx.clearStorageSync(‘latlngstart‘);
 36     wx.clearStorageSync(‘latlngend‘);
 37   },
 38 
 39   /**
 40    * 生命周期函數--監聽頁面初次渲染完成
 41    */
 42   onReady: function() {
 43 
 44   },
 45 
 46   /**
 47    * 起點
 48    */
 49   getStart(e) {
 50     let _page = this;
 51     // 關鍵字補全以及獲取經緯度
 52     qqmapsdk.getSuggestion({
 53       keyword: e.detail.value,
 54       success: function(res) {
 55         let lat = res.data[0].location.lat;
 56         let lng = res.data[0].location.lng;
 57 
 58         wx.setStorageSync(‘latlngstart‘, {
 59           lat: res.data[0].location.lat,
 60           lng: res.data[0].location.lng
 61         });
 62       },
 63       fail: function(res) {
 64         console.log(res);
 65       },
 66       complete: function(res) {
 67         console.log(res);
 68       }
 69     });
 70 
 71     // 如果輸入地點為空：則不規劃路線
 72     if (e.detail.value == ‘‘) {
 73       _page.setData({
 74         openNav: true,
 75         resultDistance: ‘‘
 76       });
 77     } else {
 78       _page.setData({
 79         openNav: false
 80       });
 81     }
 82   },
 83 
 84   /**
 85    * 終點
 86    */
 87   getEnd(e) {
 88     let _page = this;
 89     // 輸入地點獲取經緯度,我取得是數據的第一條數據.
 90     qqmapsdk.getSuggestion({
 91       keyword: e.detail.value,
 92       success: function(res) {
 93         let lat = res.data[0].location.lat;
 94         let lng = res.data[0].location.lng;
 95 
 96         wx.setStorageSync(‘latlngend‘, {
 97           lat: res.data[0].location.lat,
 98           lng: res.data[0].location.lng
 99         });
100       },
101       fail: function(res) {
102         console.log(res);
103       },
104       complete: function(res) {
105         console.log(res);
106       }
107     });
108     // 如果輸入地點為空：則不規劃路線
109     if (e.detail.value == ‘‘) {
110       _page.setData({
111         openNav: true,
112         resultDistance:‘‘
113       });
114     } else {
115       _page.setData({
116         openNav: false
117       });
118     }
119   },
120   //事件回調函數
121   driving: function() {
122 
123     let _page = this;
124 
125     // 起點經緯度
126     let latStart = wx.getStorageSync(‘latlngstart‘).lat;
127     let lngStart = wx.getStorageSync(‘latlngstart‘).lng;
128 
129     // 終點經緯度
130     let latEnd = wx.getStorageSync(‘latlngend‘).lat;
131     let lngEnd = wx.getStorageSync(‘latlngend‘).lng;
132 
133 
134     _page.setData({
135       latitude: latStart,
136       longitude: lngStart,
137       scale: 16,
138       markers: [{
139           id: 0,
140           latitude: latStart,
141           longitude: lngStart,
142           // 起點圖標
143           iconPath: ‘../image/location.png‘
144         },
145         {
146           id: 1,
147           latitude: latEnd,
148           longitude: lngEnd,
149           // 終點圖標
150           iconPath: ‘../image/location.png‘
151         },
152       ]
153     });
154     ``
155 
156     /**
157      * 獲取兩點的距離
158      */
159     qqmapsdk.calculateDistance({
160       to: [{
161         latitude: latStart,
162         longitude: lngStart
163       }, {
164         latitude: latEnd,
165         longitude: lngEnd
166       }],
167       success: function(res) {
168         console.log(res, ‘兩點之間的距離：‘, res.result.elements[1].distance);
169         _page.setData({
170           resultDistance: res.result.elements[1].distance + ‘米‘
171         });
172       },
173       fail: function(res) {
174         console.log(res);
175       },
176       complete: function(res) {
177         console.log(res);
178       }
179     });
180 
181     //網絡請求設置
182     let opt = {
183       //WebService請求地址，from為起點坐標，to為終點坐標，開發key為必填
184       url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${latStart},${lngStart}&to=${latEnd},${lngEnd}&key=${qqmapsdk.key}`,
185       method: ‘GET‘,
186       dataType: ‘json‘,
187       //請求成功回調
188       success: function(res) {
189         let ret = res.data
190         if (ret.status != 0) return; //服務異常處理
191         let coors = ret.result.routes[0].polyline,
192           pl = [];
193         //坐標解壓（返回的點串坐標，通過前向差分進行壓縮）
194         let kr = 1000000;
195         for (let i = 2; i < coors.length; i++) {
196           coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
197         }
198         //將解壓後的坐標放入點串數組pl中
199         for (let i = 0; i < coors.length; i += 2) {
200           pl.push({
201             latitude: coors[i],
202             longitude: coors[i + 1]
203           })
204         }
205         //設置polyline屬性，將路線顯示出來
206         _page.setData({
207           polyline: [{
208             points: pl,
209             color: ‘#FF0000DD‘,
210             width: 4
211           }]
212         })
213       }
214     };
215     wx.request(opt);
216   }
217 })

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