提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
一、小程序使用腾讯地图-入门及使用限制
步骤:
- 入驻腾讯位置服务平台
- 申请开发者密钥（Key）：申请秘钥
- Key的作用与注意事项
- 微信公众平台绑定插件
参考地址: https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginStart
二、小程序使用腾讯地图解析地址(坐标->位置)
1.步骤
- 申请开发者密钥（key）：申请密钥
- 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限) - 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
- 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com：
参考地址: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
2. 小程序代码示例
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
// 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,
})
// 调用腾讯地图api获取当前位置
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、插件申请接入：
在腾讯微信公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请，申请后小程序开发者可在小程序内使用该插件。
2、引入插件包：
地图选点appId： wxXXXXXX你的appId
代码如下（示例）：
// app.json
{
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "你的appId"
}
}
}
3、设置定位授权：
地图选点插件需要小程序提供定位授权才能够正常使用定位功能：
// app.json
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}
}
4、使用插件：
插件页面调用示例：
const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的app的名称
const location = JSON.stringify({
latitude: 39.89631551,
longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});
5、 插件接口调用示例：
const chooseLocation = requirePlugin('chooseLocation');
Page({
// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
onShow () {
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
},
onUnload () {
// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
chooseLocation.setLocation(null);
}
})
四、整体demo
微信获取当前经纬度并解析为地址, 并且可以实时打开地图选址demo页面
app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"plugins": {
"chooseLocation": {
"version": "1.0.9",
"provider": "你的appId"
}
}
使用页面demo文章来源：https://www.toymoban.com/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();
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
console.log("chooseLocation-onShow111", location);
if (location != null) {
this.setData({
detailAddress: location.address,
latitudeAddress: location.latitude,
longitudeAddress: location.longitude,
})
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
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,
})
// 调用腾讯地图api获取当前位置
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'; //使用在腾讯位置服务申请的key
const referer = '小程序报警'; //调用插件的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,
});
}
},
总结
微信小程序wx.getLocation+腾讯地图手动选择地址及解析地址文章来源地址https://www.toymoban.com/news/detail-806903.html
到了这里，关于微信小程序wx.getLocation+腾讯地图手动选择地址及解析地址的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
