微信小程式之高德地圖多點路線規劃過程示例詳解

阿新 • • 發佈：2021-01-20

呼叫

如何呼叫高德api？

高德官方給出的https://lbs.amap.com/api/wx/summary/開放文件比較詳細：

第一步，註冊高德開發者

第二部，去控制檯建立應用

微信小程式之高德地圖多點路線規劃過程示例詳解

即點選右上角的控制平臺建立應用

微信小程式之高德地圖多點路線規劃過程示例詳解

建立應用繫結服務記得選擇微信小程式；同時在https://lbs.amap.com/api/wx/gettingstarted中下載開發包

第三步，登陸微信公眾平臺在開發設定中將高德域名配置上

https://restapi.amap.com

第四步，開啟微信開發者工具，開啟微信小程式，在專案中新建一個libs資料夾

將在高德官網上下載得到的開發包解壓，將其中的 amap-wx.js 檔案放在libs資料夾下

微信小程式之高德地圖多點路線規劃過程示例詳解

同時建立config.js

var config = {
 key:'請在此填入你申請的key'
}
module.exports.Config = config;

在其他介面js部分中即可呼叫高德api

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');

兩點之間的導航

這是實現多點路線規劃的基礎，非常重要！！！

實現效果

微信小程式之高德地圖多點路線規劃過程示例詳解

以駕車為例，注：介面使用的是colorui

wxml部分：

<scroll-view scroll-x class="bg-white nav text-center">
 <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
 {{method[index]}}
 </view>
</scroll-view>
<view class="map">
 <view bindtap='getFormAddress'>
 <view class="cu-form-group">
 <view class="title">出發地</view>
 <input placeholder="出發地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
 </view>
 </view>
 <view bindtap='getToAddress'>
 <view class="cu-form-group">
 <view class="title">目的地</view>
 <input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
 </view>
 </view>

 <view class="flex" wx:if="{{TabCur==0||TabCur==1}}">
 <button class="cu-btn bg-blue lg" bindtap = 'getSure'>確定</button>
 </view>

</view>
<view>
 <view class="map_box" wx:if="{{TabCur==0}}">
 <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
 </view>
 <view class="text_box" wx:if='{{TabCur==0}}'>
 <view class="text">{{distance}}</view>
 <view class="text">{{cost}}</view>
 <view class="detail_button" bindtouchstart="goDetail" wx:if="{{state==1}}">詳情</view>
 </view>
</view>

js部分：

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({ 
 /**
 * 頁面的初始資料
 */
 data: {
 markers: [{
 iconPath: "../../img/mapicon_navi_s.png",id: 0,latitude: 39.989643,longitude: 116.481028,width: 23,height: 33
 },{
 iconPath: "../../img/mapicon_navi_e.png",latitude: 39.90816,longitude: 116.434446,width: 24,height: 34
 }],distance: '',cost: '',state: 0,method:['駕車','公交','騎行','步行'],index:0,TabCur:0,polyline: [],transits: []
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function(options) {
 var that = this;
 wx.showLoading({
 title: "定位中",mask: true
 })
 wx.getLocation({
 type: 'gcj02',altitude: true,//高精度定位
 success: function(res) {
 console.info(res);
 var latitude = res.latitude
 var longitude = res.longitude
 var speed = res.speed
 var accuracy = res.accuracy
 that.setData({
 markers: [{
 name: '當前位置',latitude: latitude,longitude: longitude
 },{
 name: '您要去哪兒?',latitude: '',longitude: ''
 }]
 })
 },fail: function() {
 wx.showToast({
 title: "定位失敗",icon: "none"
 })
 },complete: function() {
 wx.hideLoading()
 }
 })
 },//選擇器改變函式
 tabSelect(e) {
 this.setData({
 TabCur: e.currentTarget.dataset.id,scrollLeft: (e.currentTarget.dataset.id - 1) * 60
 })
},//獲取出發地
 getFormAddress: function() {
 var that = this;
 wx.chooseLocation({
 success: function(res) {
 var name = res.name
 var address = res.address
 var latitude = res.latitude
 var longitude = res.longitude
 var markesName = "markers[" + 0 + "].name";
 var markesLatitude = "markers[" + 0 + "].latitude";
 var markeslongitude = "markers[" + 0 + "].longitude";
 var markesiconPath = "markers[" + 0 + "].iconPath";
 that.setData({
 [markesName]: name,[markesLatitude]: latitude,[markeslongitude]: longitude,[markesiconPath]: "../../img/mapicon_navi_s.png"
 })
 },fail: function() {
 wx.showToast({
 title: '定位失敗',complete: function() {
 //隱藏定位中資訊進度
 wx.hideLoading()
 }
 })
 },//獲取目的地
 getToAddress: function() {
 var that = this;
 wx.chooseLocation({
 success: function(res) {
 console.log(res);
 var name = res.name
 var address = res.address
 var latitude = res.latitude
 var longitude = res.longitude
 var markesName = "markers[" + 1 + "].name";
 var markesLatitude = "markers[" + 1 + "].latitude";
 var markeslongitude = "markers[" + 1 + "].longitude";
 var markesiconPath = "markers[" + 1 + "].iconPath";
 that.setData({
 [markesName]: name,[markesiconPath]: "../../img/mapicon_navi_e.png"
 })
 },/**
 * 確定
 */
 getSure: function() {
 var that = this;
 var origin = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude;//出發地
var destination = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude; //目的地
var TabCur=this.data.TabCur;
app.origin = origin;
app.destination = destination;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({
 key: key
 });
 if(TabCur==0){
  myAmapFun.getDrivingRoute({//獲取駕車路線
  origin: origin,destination: destination,success: function(data) {
  var points = [];
  if (data.paths && data.paths[0] && data.paths[0].steps) {
  var steps = data.paths[0].steps;
  for (var i = 0; i < steps.length; i++) {
  var poLen = steps[i].polyline.split(';');
  for (var j = 0; j < poLen.length; j++) {
  points.push({
  longitude: parseFloat(poLen[j].split(',')[0]),latitude: parseFloat(poLen[j].split(',')[1])
  })
  }
  }
  }
  that.setData({//將路線在地圖上畫出來
  state: 1,polyline: [{
  points: points,color: "#0091ff",width: 6
  }]
  });
  if (data.paths[0] && data.paths[0].distance) {
  that.setData({
  distance: data.paths[0].distance + '米'
  });
  }
  if (data.taxi_cost) {
  that.setData({
  cost: '打車約' + parseInt(data.taxi_cost) + '元'
  });
  }
  }
 })
 }
 },/**
 * 詳情頁
 */
goDetail: function() {
  var TabCur=this.data.TabCur;
  if(TabCur==0){
  wx.navigateTo({
  url: '../detail/detail'
  })
 }
 },})

wxss部分：

.flex-style{
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 }
 .flex-item{
 height: 35px;
 line-height: 35px;
 text-align: center;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1
 }
 .flex-item.active{
 color:#0091ff;
 }
 .map_title{
 position:absolute;
 top: 10px;
 bottom: 110px;
 left: 0px;
 right: 0px;
 }
 .map_btn{
 position:absolute;
 top: 150px;
 bottom: 220px;
 left: 0px;
 right: 0px;
 }
 .map_box{
 position:absolute;
 top: 187px;
 bottom: 70px;
 left: 0px;
 right: 0px;
 }
 #navi_map{
 width: 100%;
 height: 100%;
 }
 .text_box{
 
 position:absolute;
 height: 70px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 }
 .text_box .text{
 margin: 15px;
 }

詳情頁部分：

html部分：

<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
 {{i.instruction}}
</view>

js部分：

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
 data: {
 steps: {}
 },onLoad: function () {
 var that = this;
 var key = config.Config.key;
 var myAmapFun = new amapFile.AMapWX({ key: key });
 myAmapFun.getDrivingRoute({
 origin: app.origin,destination: app.destination,success: function (data) {
 if (data.paths && data.paths[0] && data.paths[0].steps) {
 that.setData({
 steps: data.paths[0].steps
 });
 }
 },fail: function (info) {
 }
 })
 }
})

wxss部分：

Page{

}
.text_box{
 margin: 0 15px;
 padding: 15px 0;
 border-bottom: 1px solid #c3c3c3;
 font-size: 13px;
}
.text_box .text_item{display:inline-block;line-height: 8px;}

其他公交、騎行、步行方法與駕車類似，可以檢視高德開放文件學習

我的設計上公交可以檢視不同城市的公交路線，而非只能檢視一個城市的，實現很簡單，在介面上添加了一個選擇器城市引數傳至city，即可檢視不同城市的公交路線

微信小程式之高德地圖多點路線規劃過程示例詳解

多點路線規劃

實現效果：可以選擇出發地，選擇不同的景點，根據不同的出行方式給出一條距離最短的路徑

微信小程式之高德地圖多點路線規劃過程示例詳解

實現思路：

獲取到周邊的景點位置等相關資訊
將使用者新增的景點資訊傳到下一個頁面進行計算
獲得所有可能的路線並計算每一條路線的長度找出距離最短的一條

踩坑

一開始打算利用深度優先搜尋演算法實現，但是發現在現實的地圖中，任意兩點之間幾乎都存在路，並不像抽象後的數學題一樣。於是最後使用了全排列的方法獲取到了所有的路線。
在全排列的過程中需要遞迴呼叫函式，涉及到傳參問題，需要將自定義的帶參函式寫在Page外，寫在Page裡的話，我嘗試了很多方式呼叫函式都會報錯。
在使用高德api獲取路徑的函式後，無法計算每一段路線的長度，最後發現是在函式呼叫的過程中，儲存路線距離的陣列只是暫存的，在函式呼叫後無法使用該陣列來計算距離。於是最後我在函式呼叫的過程中計算每一條路線的長度並進行比較，最後用this.setData的方法將最後得到的路線展示在介面上。

具體實現