這里用到谷歌地圖api:
https://lbs.amap.com/api/wx/guide/route/route#demo 路線規(guī)劃
https://lbs.amap.com/api/webservice/guide/api/georegeo 地理編碼轉(zhuǎn)換
知識點
- 多地址轉(zhuǎn)換
- 路線規(guī)劃完成后加載地圖
- wxml地圖代碼
<view class="map_box">
<map id="navi_map" latitude="{{map.lat}}" longitude="{{map.lng}}" markers="{{map.markers}}" scale="8" polyline="{{polyline}}" wx:if="{{map.hasMarkers}}">
</map>
</view>
- js代碼
var amapFile = require('../../utils/amap-wx.js') //地圖api
var config = require('../../utils/config.js'); //兩個地圖的key
onLoad() {
//loading代碼塊
wx.showLoading({
title: 'loading',
icon: 'loading',
})
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
const trackList = (wx.getStorageSync('trackList')).reverse(); //接口緩存
var sendlocation = trackList[trackList.length -1].scanCity + trackList[trackList.length -1].scanCounty ;
var dispatchlocation = trackList[0].scanCity + trackList[0].scanCounty ;
wx.request({
url: 'https://restapi.amap.com/v3/geocode/geo',
data: {
key:config.Config.key2,
address:sendlocation+'|'+dispatchlocation,
batch:true
},
method: 'GET',
header: {
'content-type': 'application/json;charset=utf-8' // 默認值
},
success(res) {
const startlocation = res.data.geocodes[0].location;
const endlocation = res.data.geocodes[1].location;
//移動地圖
let _markers = [];
_markers.push({
iconPath: "../../image/mapicon_navi_s.png",
id: 0,
latitude: startlocation.split(',')[1],
longitude: startlocation.split(',')[0],
width: 23,
height: 33,
},{
iconPath: "../../image/mapicon_navi_e.png",
id: 0,
latitude: endlocation.split(',')[1],
longitude: endlocation.split(',')[0],
width: 23,
height: 33,
});
//繪制地圖
myAmapFun.getDrivingRoute({
origin: startlocation,
destination: endlocation,
success: function (data) {
wx.hideLoading();
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({
'map.lat': startlocation.split(',')[1],
'map.lng': startlocation.split(',')[0],
'map.markers':_markers,
'map.hasMarkers': true,
polyline: [{
points: points,
color: "#0091ff",
width: 6,
}]
});
},
fail: function (info) {
}
})
}
})
}