1.如何获取用户地理位置的授权,以及如何在用户拒绝授权后进行二次设置授权
因为需求是页面需要获取经纬度以及地理位置
所以第一次授权放onLoad
wx.getLocation({
type: 'wgs84',
success(res) {
let latitude = res.latitude
let longitude = res.longitude
that.setData({
latitude ,
longitude
})
}
})
如果用户第一次授权通过了就获取了经纬度可以用于后续调用腾讯地图sdk
如果用户拒绝位置授权则进入第二步
2.用户没有授权位置信息时,可以通过事件触发方法让用户自主打开位置授权,如果用户一直没有位置授权则事件一直有效
// 获取地理位置 wx.getSetting() 获取用户权限设置 wx.openSetting() 打开微信自带权限设置页面
choiceAddress() {
let that = this;
wx.getSetting({
success: (res) => {
console.log(JSON.stringify(res))
console.log(res.authSetting['scope.userLocation'])
if (res.authSetting['scope.userLocation'] != undefined &&
res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置,请确认授权',
success: function (res) {
if (res.cancel) {
wx.showToast({
title: '拒绝授权',
icon: 'none',
duration: 1000
})
} else if (res.confirm) {
wx.openSetting({
success: function (res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'none',
duration: 1000
})
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
}
}
})
}
}
})
},
以上代码可以直接使用
至此位置信息授权就完成了
2.关于接入腾讯地图sdk获取位置详细信息(地址逆解析)
首先配置腾讯sdk,下面是腾讯位置服务控制台的配置
(1).小程序要选择WebServiceAPI
(2).小程序 APPID必填(白名单可以不用,如果后台调用的可以配)
(3).免费版同时调用只支持10次(如后台接口查询地址逆解析一次最多10条数据) 一天最大调用10000次
前面已经拿到了经纬度,现在去逆解析获取地址
首先去app.js 设置一个全局变量
//腾讯位置服务的key
qqMapKey: '****',
然后去下载qqmap-wx-jssdk.js文件放在utils文件夹下面(腾讯地图服务里面有)
小程序单页面引入并使用
const app = getApp();
const QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
const qqmapsdk = new QQMapWX({
key: app.globalData.qqMapKey
});
// 获取地址信息具体代码
qqmapsdk.reverseGeocoder({
location: {
latitude: data.latitude,
longitude: data.longitude,
},
success: function (res) {
console.log(res)
if (res.message == "query ok")
that.setData({
detailedAddress: res.result,
})
},
fail: function (res) {
console.log(res)
}
})
// detailedAddress就是逆解析出来的位置信息了
3.小程序唤起高德地图、腾讯地图做导航(简单)
//点击定位唤起高德等app
toLocation() {
let that = this;
wx.openLocation({
latitude: Number(that.data.latitude),
longitude: Number(that.data.longitude),
name: that.data.shopName,
address: that.data.detailedAddress.address,
})
},
方法参数如下
4.可以自己画地图等,包括一系列配置
希望能帮到大家,也便于自己记录(如果有帮助到大家可以点下赞哦~)!!!
如有疑问或者不对的地方可以下方评论留言讨论哦~会积极回复大家的!!!