taro 微信小程序使用地图逆向解析详细地址
发表时间:2020-10-19
发布人:葵宇科技
浏览次数:153
在微信 小程序中使用定位服务,首先要用户授权,在app.json中加入相应代码,
第一步
在app.config.ts中加入下面代码,弹出用户授权地图权限
"permission":{
"scope.userLocation":{
"desc":"请点击允许"
}
},
第二步
在页面中插入wx.authorize开通用户授权
wx.authorize({//获取权限
scope: 'scope.userLocation',//位置权限
success (res) {
//授权成功 可进行拿取用户地址
}
wx.authorize:授权
scope:要授权的功能,可查看微信文档
第三步
去腾讯地图申请开发者权限,获取key创建相应 小程序秘钥
腾讯地图地址
然后配置相应appid
第四步
使用 ‘微信小程序 JavaScriptSDK’ 需要下载微信小程序 JavaScriptSDK v1.2 文件。 然后将 微信小程序 JavaScriptSDK 文件引入到当前页面的 xx.js 中。jsSDK地址
第五步
在所需页面引入文件
import QQMapWX from "@/lib/qqmap-wx-jssdk.min.js"
第六步
通过wx.getLocation 获取用户地址,也可以用wx.chooseLocation(这个是用户可以选择的),第一个是自动获取的
wx.getLocation({
type:'gcj02',//可选值,wgs84 gcj02相对准确一些
isHighAccuracy:true,//增强经纬度获取
success(longLat){
const { latitude,longitude } = longLat;
//可在此步骤把经纬度存入状态管理仓库
// QQMapWX刚才引入的下载好js文件
let qqmapsdk = new QQMapWX({
key: '腾讯地图key'
})
//通过reverseGeocoder用经纬度获取文字地址信息
qqmapsdk.reverseGeocoder({
location: {latitude,longitude},
success(address) {
//拿到的信息
console.log('addresa--------addresa', address)
}
})
}
})