提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
一、小程序使用騰訊地圖-入門及使用限制
步驟:
- 入駐騰訊位置服務(wù)平臺
- 申請開發(fā)者密鑰（Key）：申請秘鑰
- Key的作用與注意事項
- 微信公眾平臺綁定插件
參考地址: https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginStart
二、小程序使用騰訊地圖解析地址(坐標->位置)
1.步驟
- 申請開發(fā)者密鑰（key）：申請密鑰
- 開通webserviceAPI服務(wù)：控制臺 ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限) - 下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
- 安全域名設(shè)置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com：
參考地址: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
2. 小程序代碼示例
// 引入SDK核心類，js文件根據(jù)自己業(yè)務(wù)，位置可自行放置
// qqmap-wx-jssdk.js在參考鏈接官方下下載
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
onLoad: function () {
// 實例化API核心類
qqmapsdk = new QQMapWX({
key: '申請的key'
});
},
getLocation() {
let _self = this;
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true,
altitude: true,
success(res) {
// console.log("res22-getLocation", res);
const speed = res.speed
const accuracy = res.accuracy
let { latitude, longitude } = res
_self.setData({
latitudeAddress: latitude,
longitudeAddress: longitude,
})
// 調(diào)用騰訊地圖api獲取當(dāng)前位置
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
_self.setData({
detailAddress: res.result.address,
})
console.log("res-reverseGeocoder-success", res.result);
},
fail: function (res) {
// console.log("res-reverseGeocoder-fail", res.result);
},
complete: function (res) {
// console.log("res-reverseGeocoder-complete", res.result);
wx.hideLoading();
}
});
}
})
},
三、騰訊地圖選點插件
1、插件申請接入：
在騰訊微信公眾平臺中， “微信小程序官方后臺-設(shè)置-第三方服務(wù)-插件管理” 里點擊 “添加插件”，搜索 “騰訊位置服務(wù)地圖選點” 申請，申請后小程序開發(fā)者可在小程序內(nèi)使用該插件。
2、引入插件包：
地圖選點appId： wxXXXXXX你的appId
代碼如下（示例）：
// app.json
{
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "你的appId"
}
}
}
3、設(shè)置定位授權(quán)：
地圖選點插件需要小程序提供定位授權(quán)才能夠正常使用定位功能：
// app.json
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序定位"
}
}
}
4、使用插件：
插件頁面調(diào)用示例：
const key = ''; //使用在騰訊位置服務(wù)申請的key
const referer = ''; //調(diào)用插件的app的名稱
const location = JSON.stringify({
latitude: 39.89631551,
longitude: 116.323459711
});
const category = '生活服務(wù),娛樂休閑';
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});
5、 插件接口調(diào)用示例：
const chooseLocation = requirePlugin('chooseLocation');
Page({
// 從地圖選點插件返回后，在頁面的onShow生命周期函數(shù)中能夠調(diào)用插件接口，取得選點結(jié)果對象
onShow () {
const location = chooseLocation.getLocation(); // 如果點擊確認選點按鈕，則返回選點結(jié)果對象，否則返回null
},
onUnload () {
// 頁面卸載時設(shè)置插件選點數(shù)據(jù)為null，防止再次進入頁面，geLocation返回的是上次選點結(jié)果
chooseLocation.setLocation(null);
}
})
四、整體demo
微信獲取當(dāng)前經(jīng)緯度并解析為地址, 并且可以實時打開地圖選址demo頁面
app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
},
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "你的appId"
}
}
使用頁面demo文章來源：http://www.zghlxwxcb.cn/news/detail-806903.html
// index.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
const chooseLocation = requirePlugin('chooseLocation');
Page({
data: {
detailAddress: "",
latitudeAddress: "",
longitudeAddress: "",
callDetailShow: false,
locationAdd: {},
},
onLoad() {
// 實例化API核心類
qqmapsdk = new QQMapWX({
key: 'NIOBZ-QVBWV-CKLPF-UMXFI-B45LK-TEBCF'
});
this.getLocation();
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
const location = chooseLocation.getLocation(); // 如果點擊確認選點按鈕，則返回選點結(jié)果對象，否則返回null
console.log("chooseLocation-onShow111", location);
if (location != null) {
this.setData({
detailAddress: location.address,
latitudeAddress: location.latitude,
longitudeAddress: location.longitude,
})
}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
// 頁面卸載時設(shè)置插件選點數(shù)據(jù)為null，防止再次進入頁面，geLocation返回的是上次選點結(jié)果
chooseLocation.setLocation(null);
},
getLocation() {
let _self = this;
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true,
altitude: true,
success(res) {
// console.log("res22-getLocation", res);
const speed = res.speed
const accuracy = res.accuracy
let { latitude, longitude } = res
_self.setData({
latitudeAddress: latitude,
longitudeAddress: longitude,
})
// 調(diào)用騰訊地圖api獲取當(dāng)前位置
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
_self.setData({
detailAddress: res.result.address,
})
console.log("res-reverseGeocoder-success", res.result);
},
fail: function (res) {
// console.log("res-reverseGeocoder-fail", res.result);
},
complete: function (res) {
// console.log("res-reverseGeocoder-complete", res.result);
wx.hideLoading();
}
});
}
})
},
updataAddress() {
const key = 'XXXXX-TEBCF'; //使用在騰訊位置服務(wù)申請的key
const referer = '小程序報警'; //調(diào)用插件的app的名稱
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
});
},
isRecordsSendChange(event) {
console.log("isRecordsSendChange", event.detail);
if (event.detail) {
this.setData({
isRecordsSend: 1,
});
} else {
this.setData({
isRecordsSend: 0,
});
}
},
總結(jié)
微信小程序wx.getLocation+騰訊地圖手動選擇地址及解析地址文章來源地址http://www.zghlxwxcb.cn/news/detail-806903.html
到了這里，關(guān)于微信小程序wx.getLocation+騰訊地圖手動選擇地址及解析地址的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
