一谨胞、地圖API選擇
1、查看微信小程序自帶的api和相關(guān)其他的api蒜鸡，微信團隊自帶的map組件理解不深胯努，高德地圖的api簡明易理解使用。
2逢防、原app開發(fā)采用的是高德地圖組件叶沛，為了和app能夠保持一致性，采取高德地圖開發(fā)工具作為本次地圖開發(fā)首選忘朝。
微信小程序地圖map組件開發(fā)文檔
微信小程序MapContext開發(fā)文檔
高德地圖開發(fā)文檔
二灰署、高德地圖相關(guān)資料下載
2.1、js下載
2.2局嘁、高德key申請
2.3溉箕、相關(guān)配置
三、手寫一個demo
3.1悦昵、再全局apps.js中注冊全局key
App({
d: {
.....
},
gdMapProperties:{
key:"xxxxxx"
},
....
3.2肴茄、創(chuàng)建指定的頁面和地圖操作
創(chuàng)建指定的頁面，并進行路由設置但指，要求能夠跳轉(zhuǎn)進頁面独郎。
3.2.1、在地圖頁面的js中枚赡，引入全局的js配置和高德自己的amap-wx.js文件氓癌。
var amapFile = require("../../../utils/amap-wx.js");
const apps = getApp();
3.2.2、在獲取位置信息前贫橙，需要優(yōu)先判斷小程序是否開啟了位置權(quán)限信息
app.json中贪婉，標識權(quán)限信息
"permission": {
"scope.userLocation": {
"desc": "您的位置信息將用于設備定位和藍牙操作"
}
},
在獲取位置信息前，判斷權(quán)限信息卢肃。
使用高德地圖獲取位置信息疲迂，失敗時則判斷是否具有權(quán)限信息
onLoad: function () {
var that = this;
this.data.myAmapFun = new amapFile.AMapWX({ key: apps.gdMapProperties.key });
//授權(quán)檢測
getPermission(this);
},
//授權(quán)檢測函數(shù)封裝
function getPermission(obj) {
obj.data.myAmapFun.getPoiAround({
success: function (data) {
console.log("獲取poi數(shù)據(jù)成功回調(diào)：" + JSON.stringify(data));
markersData = data.markers;
//判斷獲取的位置信息數(shù)
if(markersData.length > 0){
//存在數(shù)據(jù) 取第一條數(shù)據(jù)作為當前用戶的位置信息值
obj.setData({
latitude: markersData[0].latitude,
longitude: markersData[0].longitude,
});
}else{
//不存在位置信息時，采取微信自帶地圖實現(xiàn)定位效果
wx.getLocation({
type: 'gcj02',
success: function(res) {
//顯示經(jīng)緯度信息
obj.setData({
latitude: res.latitude,
longitude: res.longitude
});
},
fail: function () {
//失敗則采取中國北京作為地圖顯示
obj.setData({
latitude: 39.909729,
longitude: 116.398419
});
}
})
}
},
fail: function (info) {
console.log("獲取poi數(shù)據(jù)失敗回調(diào):" + info);
//如果失敗 則先檢測權(quán)限是否給予
wx.getSetting({
success: function (res) {
var statu = res.authSetting;
if (!statu['scope.userLocation']) {
wx.showModal({
title: '是否授權(quán)當前位置',
content: '需要獲取您的地理位置莫湘，請確認授權(quán)尤蒿，否則地圖功能將無法使用',
success: function (tip) {
if (tip.confirm) {
wx.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"] === true) {
wx.showToast({
title: '授權(quán)成功',
icon: 'success',
duration: 1000
})
//授權(quán)成功之后，再調(diào)用定位進行位置獲取
getPermission(obj);
} else {
wx.showToast({
title: '授權(quán)失敗',
icon: 'success',
duration: 1000
})
}
}
})
}
}
})
}
},
fail: function (res) {
wx.showToast({
title: '調(diào)用授權(quán)窗口失敗',
icon: 'success',
duration: 1000
})
}
})
}
})
}
3.2.3幅垮、marker顯示
<view class="map_container">
<map class="map" id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="18"
show-location="true"
markers="{{markers}}"
bindmarkertap="makertap"
bindtap='onclickMap'>
</map>
</view>
data: {
myAmapFun: null,//高德地圖對象
//marker 設備位置信息
markers: [{ id: "1", latitude: "30.499488", longitude:"114.342586"}],
latitude: '',
longitude: '',
textData: {}
}
當自定義data屬性中的marker屬性時腰池，采取微信 map 組件實現(xiàn)地圖顯示，能夠?qū)arker信息顯示在地圖指定的區(qū)域內(nèi)。
如果是公司自己的開發(fā)設備示弓，需要在地圖上顯示設備信息時讳侨，則可以在onload 頁面加載完成時，請求服務器獲取相關(guān)的設備的經(jīng)緯度信息奏属。
注意：
此處采取的是 微信的 map組件 和 marker標識 組件信息跨跨，所以設定信息，需要采取微信官方文檔的要求來囱皿，比如marker需要給定不同的id勇婴，可以提升響應速率等。
微信map組件和marker組件文檔
3.2.4嘱腥、線路規(guī)劃操作
此時需求為：點擊地圖對應的marker標識時咆耿，需要在地圖上顯示對應的線路規(guī)劃信息。
線路規(guī)劃有很多種類爹橱，包括 步行、駕車窄做、打車愧驱、乘騎等，我們目前只考慮兩種方式椭盏，步行和駕車出行组砚。
<view class="gotoView">
<view class="gotobyDriver" bindtap="gotobyDriver">駕車</view>
<view class="gotobywalk" bindtap="gotobywalk" >步行</view>
</view>
1、采取駕車出行方式顯示線路規(guī)劃
gotobyDriver:function(){
console.log("駕車出行");
//通過api 獲取線路點數(shù)
var that = this;
this.data.myAmapFun.getDrivingRoute({
origin:that.data.longitude+","+that.data.latitude,
destination: that.data.markers[0].longitude + "," + that.data.markers[0].latitude,
success:function(data){
//獲取當前經(jīng)緯度信息到目標經(jīng)緯度信息間無數(shù)個經(jīng)緯度點位
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
//保存信息詳情
that.setData({
detailSteps: 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({
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
},
fail: function (info) {
}
});
},
2掏颊、選擇步行的出行方式線路規(guī)劃
//步行出行
gotobywalk:function(){
console.log("步行出行");
//通過api 獲取線路點數(shù)
var that = this;
this.data.myAmapFun.getWalkingRoute({
origin: that.data.longitude + "," + that.data.latitude,
destination: that.data.markers[0].longitude + "," + that.data.markers[0].latitude,
success: function (data) {
//獲取當前經(jīng)緯度信息到目標經(jīng)緯度信息間無數(shù)個經(jīng)緯度點位
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
console.log(JSON.stringify(steps));
//保存信息詳情
that.setData({
detailSteps: 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({
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
},
fail: function (info) {
}
});
},
四糟红、整體完整代碼
github小程序定位、地圖顯示乌叶、線路規(guī)劃完整demo
五盆偿、2019.10.31 對定位代碼進行修改操作
昨晚用微信開發(fā)者工具測試，地圖都能正常顯示准浴，也能進行相應的線路規(guī)劃操作事扭，但采取微信最新版本+小米8se實現(xiàn)真機實測時，卻出現(xiàn)了定位到了非洲西邊的海域乐横，通過查詢?nèi)罩景l(fā)現(xiàn)：
1求橄、obj.data.myAmapFun.getPoiAround 無成功和失敗回調(diào)，但有時也有回調(diào)信息葡公，具體問題還在分析罐农。
2、map組件出現(xiàn)位置點位是 show-location設置為true時催什，自動顯示的涵亏，但依舊無經(jīng)緯度信息(注意點)
當無當前手機所在區(qū)域的位置信息時，線路規(guī)劃是無法正常進行的，設置初始的經(jīng)緯度信息測試發(fā)現(xiàn)溯乒，可以進行線路規(guī)劃操作夹厌，證明此時的想法是正確的。
我們的小程序開發(fā)裆悄，客戶的使用范圍是全國各地都有矛纹，我們的初始經(jīng)緯度信息不可能寫死吧，所以我們還得繼續(xù)死磕光稼，如何獲取動態(tài)的或南、具體的經(jīng)緯度信息！艾君！
通過閱讀文檔發(fā)現(xiàn)：
在微信api 位置 中采够，有一個接口，wx.getLocation(Object object)冰垄，在微信給予的demo中蹬癌，并未寫明fail回調(diào)信息，通過我的測試發(fā)現(xiàn)虹茶，當未授予位置信息獲取權(quán)限時逝薪，此接口會進入失敗回調(diào)。那如何能夠具體實現(xiàn)動態(tài)的定位呢蝴罪？我們修改 getPermission(obj) 函數(shù)董济。
function getPermission(obj) {
console.log("getPermission");
wx.getLocation({
type: 'gcj02',
success: function (res) {
console.log("success === "+JSON.stringify(res));
//顯示經(jīng)緯度信息
obj.setData({
latitude: res.latitude,
longitude: res.longitude
});
},
fail: function (res) {
console.log("fail == "+JSON.stringify(res));
//獲取位置信息失敗，判斷是否存在位置權(quán)限未給予要门，造成的影響
if (!obj.data.getLocationFailAgain){
console.log("首次失敗 查詢位置權(quán)限的授權(quán)情況");
obj.setData({
getLocationFailAgain:true
});
wx.getSetting({
success: function (res) {
var statu = res.authSetting;
if (!statu['scope.userLocation']) {
wx.showModal({
title: '是否授權(quán)當前位置',
content: '需要獲取您的地理位置虏肾，請確認授權(quán)，否則地圖功能將無法使用',
success: function (tip) {
if (tip.confirm) {
wx.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"] === true) {
wx.showToast({
title: '授權(quán)成功',
icon: 'success',
duration: 1000
})
//授權(quán)成功之后欢搜，再調(diào)用定位進行位置獲取
getPermission(obj);
} else {
wx.showToast({
title: '授權(quán)失敗',
icon: 'success',
duration: 1000
});
obj.setData({
latitude: 39.909729,
longitude: 116.398419
});
}
}
})
}else{
//點擊取消操作
wx.showToast({
title: '授權(quán)失敗',
icon: 'success',
duration: 1000
});
obj.setData({
latitude: 39.909729,
longitude: 116.398419
});
}
}
})
}
},
fail: function (res) {
wx.showToast({
title: '調(diào)用授權(quán)窗口失敗',
icon: 'success',
duration: 1000
})
//失敗則采取中國北京作為地圖顯示
obj.setData({
latitude: 39.909729,
longitude: 116.398419
});
}
})
}
}
})
}
修改后的函數(shù)判斷相對簡單封豪，為了防止不斷進入死循環(huán)，所以在全局data中加入了一個標識炒瘟，如果請求了設置信息接口撑毛，則表示不會繼續(xù)走權(quán)限獲取操作流程。具體的代碼還是去看我的github代碼吧唧领。
————————————————
作者：「專注寫bug」
原文鏈接：https://blog.csdn.net/qq_38322527/article/details/102800670
