目前在做的小程序需要使用到map組件以及小程序個性地圖，涉及到的功能如下：
1# 獲取用戶當前位置，返回對應的省市區
2# 根據目的地的具體地址，顯示在地圖中的位置
3# 根據用戶當前位置，計算出 與 接口返回的目的地數組中每條地址的相距距離
以下是具體實現過程：
1：申請開通個性化地圖能力
個性化地圖能力可在小程序后台“設置-開發者工具-騰訊位置服務”申請開通
對應的小程序后台的截圖（已申請成功）:
2：申請開發者key及所需騰訊位置服務相關產品
微信小程序LBS解決方案地址：https://lbs.qq.com/product/miniapp/home/index.html
2.1 申請申請開發者key（https://lbs.qq.com/console/key.html)
以下填寫數據僅為演示，開發時請按照相關規范填寫!
創建成功后,就會看到key：
點擊【進入：key設置】按鈕，就會進入選擇啟用產品頁面
這里需要注意兩點：
1：確認自己需要啟用哪些API，可根據 微信小程序JavaScript SDK https://lbs.qq.com/qqmap_wx_jssdk/index.html 自行查看
2： 安全域名設置，在“設置” -> “開發設置”中設置request合法域名，添加https://apis.map.qq.com
3：需求功能實現
3.1 ：獲取用戶當前位置，返回對應的省市區
思路：通過wx.getLocation獲取用戶當前的經緯度，然后通過逆地址解析（坐標位置描述），從而獲取所在位置的文字描述
逆地址解析（坐標位置描述）Api : https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
let QQMapWX = require('../../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
data: {
receiver: '',
area: ''
},
onLoad: function() {
// 實例化API核心類
qqmapsdk = new QQMapWX({
key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
});
},
getLocation() {
let self = this;
wx.showLoading({
title: '正在獲取，請稍后...',
mask: true,
});
wx.getLocation({
type: 'gcj02',
success(res) {
//逆地址解析
self.getReverseGeo(res.latitude, res.longitude)
},
fail() {
wx.showToast({
title: '獲取位置信息失敗，請稍后再試',
icon: 'none',
duration: 1500,
mask: true
})
}
})
},
getReverseGeo(latitude, longitude) {
let self = this;
let addressComponent = '';
//本接口提供由坐標到坐標所在位置的文字描述的轉換，輸入坐標返回地理位置信息和附近poi列表。
//api:https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
get_poi: 1, //是否返回周邊POI列表：1.返回；0不返回(默認),非必須參數
success: function(res) {
let adInfoName = res.result.ad_info.name.split(',').join('');
wx.showToast({
title: '獲取成功',
icon: 'success',
duration: 1000,
mask: true
})
self.setData({
area: adInfoName
})
},
fail: function(error) {
console.error(error);
wx.showToast({
title: '獲取位置信息失敗，請稍后再試',
icon: 'none',
duration: 1500,
mask: true
})
},
complete: function() {
wx.hideLoading();
}
})
}
})
3.2: 根據目的地的具體地址，顯示在地圖中的位置
思路：通過地址解析（地址轉坐標），然后通過調用wx.openLocation 在微信內置地圖查看位置
地址解析（地址轉坐標）Api : https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html
let address = '杭州西湖風景區';
qqmapsdk.geocoder({
address: address, //地址參數
success: function(res) {
let latitude = res.result.location.lat;
let longitude = res.result.location.lng;
//通過經緯度打開地圖頁面
wx.openLocation({
latitude,
longitude,
scale: 18
})
},
fail: function(error) {
wx.showToast({
title: error.message,
icon: 'none',
duration: 1500,
mask: true
})
},
complete: function(res) {
console.log(res);
}
})
開發工具調試效果：
3.3: 根據用戶當前位置，計算出 與 接口返回的目的地數組中每條地址的相距距離
思路：調用wx.getLocation獲取用戶當前的經緯度，存起來；然后遍歷目的地數組，通過地址解析（地址轉坐標）獲取對應的經緯度，然后通過距離計算api (calculateDistance(options:Object)) 計算出距離
距離計算Api : https://lbs.qq.com/qqmap_wx_jssdk/method-calculatedistance.html
let QQMapWX = require('../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
data: {
areas: ['北京故宮博物院', '杭州西湖風景區', '蘇州拙政園', '南京明孝陵'],
userLocation: '',
distance: []
},
onLoad() {
qqmapsdk = new QQMapWX({
key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
});
//獲取用戶當前位置
this.getUserPos();
},
getUserPos() {
let self = this;
wx.getLocation({
type: 'wgs84',
success(res) {
self.data.userLocation = res.latitude + "," + res.longitude
self.traverDistance() //遍歷地址，算距離
}
})
},
traverDistance() {
let self = this;
let areas = self.data.areas;
areas.forEach((item, index) => {
qqmapsdk.geocoder({
address: item, //地址參數
success: function(res) {
let pos = res.result.location.lat + ',' + res.result.location.lng
self.calculateDistance(pos, index)
},
fail: function(error) {
console.error(error);
wx.showToast({
title: error.message,
icon: 'none',
duration: 1500,
mask: true
})
},
complete: function(res) {
console.log(res);
}
})
});
},
calculateDistance(dest, index) {
let self = this;
qqmapsdk.calculateDistance({
//mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填默認：'walking',可不填
//from參數不填默認當前地址
//獲取表單提交的經緯度並設置from和to參數（示例為string格式）
from: self.data.userLocation || '', //若起點有數據則采用起點坐標，若為空默認當前地址
to: dest, //終點坐標
success: function(res) { //成功后的回調
let res = res.result;
for (let i = 0; i < res.elements.length; i++) {
self.data.distance[index] = res.elements[i].distance
}
self.setData({ //設置並更新distance數據
distance: self.data.distance
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
}
})
開發工具調試效果：
以上。