一、app.json配置
wx.getLocation 和 wx.chooseLocation 使用时需要声明
"permission": {
"scope.userLocation": {
"desc": "您的位置将在小程序地图上展示"
}
},
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
]
二、获取经纬度
index.ts 代码
官方文档：wx.getLocation 使用该方法获取经纬度
Page({
data:{
lng:0, // 经度
lat:0 // 纬度
},
onLoad() {
// 在需要使用地图或需要使用经纬度的地方使用 wx.getLocation 询问用户是否授权位置信息
wx.getLocation({
type: 'wgs84',
success(res) {
console.log(res)
that.setData({
lat: res.latitude,
lng: res.longitude
})
},
fail(err) {
console.log(err)
}
})
}
})
授权截图
输出结果
三、打开地图选择位置信息
官网文档：wx.chooseLocation 使用此方法打开地图
index.WXML 代码
<view class="container">
<button class="map" type="primary" bindtap="mapOpen">地图</button>
</view>
index.ts 代码
Page({
data: {
lat: 0,
lng: 0,
},
onLoad() {
// 获取用户经纬度
wx.getLocation({
type: 'gcj02',
success(res) {
console.log(res)
that.setData({
lat: res.latitude,
lng: res.longitude
})
},
fail(err) {
console.log(err)
}
})
},
mapOpen() {
let that = this
wx.chooseLocation({
latitude: that.data.lat,
longitude: that.data.lng,
success(res) {
// 选择位置返回的信息
console.log(res)
}
})
},
})
地图截图
输出结果
四、补充
从我们获取到的详细信息中获取到省 市 区
mapOpen() {
let that = this
wx.chooseLocation({
latitude: that.data.lat,
longitude: that.data.lng,
success(res) {
console.log(res.address.slice(0, res.address.indexOf('省') + 1))
console.log(res.address.slice(res.address.indexOf('省') + 1, res.address.indexOf('市') + 1))
console.log(res.address.slice(res.address.indexOf('市') + 1, res.address.indexOf('区') + 1))
console.log(res.name)
}
})
},
输出结果
