地理定位-wx.getLocation
掌握小程序中的定位api:getLocation和chooseLocation
分析:
用户进入这个页面时,就要获取当前位置。这个功能有现成的api。
getLocation
获取用户所在位置的经纬度。在小程序中调用这个接口时必须先在 app.json 中申请调用权限(开发环境可以省略)。
app.json
{
"requiredPrivateInfos": [
"getLocation"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
}
这个弹层会出现一次,点击允许之后就不会在出现。
业务代码
Page({
onLoad() {
this.getLocation()
},
async getLocation() {
const res = await wx.getLocation() // 要提前申请权限
console.log(res)
},
})
wx.getLocation返回的结果格式大致如下:
accuracy: 65
errMsg: "getLocation:ok"
horizontalAccuracy: 65
latitude: 30.88131
longitude: 114.37509
speed: -1
verticalAccuracy: 65
wx.getLocation 只能得到经纬度信息,如何根据经纬度获取到所在地的名称呢?
逆地址解析-reverseGeocoder
本接口提供由坐标 → 坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表
文档地址:微信小程序JavaScript SDK | 腾讯位置服务
步骤
1导入 QQMapWX 并设置好 key
2 业务代码
在代码中补充getPoint方法:
1调用接口把经纬度转换成对应位置的文字
2保存文字到address
//
// 导入位置服务实例
import QQMap from '../../../utils/qqmap'
Page({
onLoad() {
// 获取用户经纬度
this.getLocation()
},
// 获取用户的位置
async getLocation() {
// 调用小和序 API 获取用户位置
const { latitude, longitude } = await wx.getLocation()
this.getPoint(latitude, longitude)
console.log('终点位置:', latitude, longitude)
},
getPoint(latitude, longitude) {
// 逆地址解析(根据经纬度来获取地址)
QQMap.reverseGeocoder({
location: [latitude, longitude].join(','),
success: ({ result: { address } }) => {
// console.log(address)
// 数据数据
this.setData({ address })
},
})
}
})
3渲染页面
重新定位
根据当前的定位,调用 QQMap.search() 找到周边的信息。
QQMap.search
搜索周边poi(Point of Interest),比如:“酒店” “餐饮” “娱乐” “学校” 等等 文档地址:微信小程序JavaScript SDK | 腾讯位置服务
调用了QQMap.search
// house_pkg/pages/locate/index.ts
// 导入位置服务实例
import QQMap from '../../../utils/qqmap'
Page({
onLoad() {
// 获取用户经纬度
this.getLocation()
},
// 获取用户的位置
async getLocation() {
// 调用小和序 API 获取用户位置
const { latitude, longitude } = await wx.getLocation()
//
this.getPoint(latitude, longitude)
console.log('终点位置:', latitude, longitude)
},
getPoint(latitude, longitude) {
// 省略其他....
QQMap.search({
keyword: '住宅小区', //搜索关键词
location: [latitude, longitude].join(','), //设置周边搜索中心点
page_size: 5,
success: (result) => {
console.log(result)
// 过滤掉多余的数据
const points = result.data.map(({ id, title, _distance }) => {
return { id, title, _distance }
})
// console.log(points)
// 渲染数据
this.setData({ points })
}
})
},
})
视图渲染
api 会自动打开地图
申请权限
chooseLocation
获取用户指定位置的经纬度。在小程序中调用这个接口时必须要在 app.json 中申请调用权限
参考代码
{
"requiredPrivateInfos": [
"chooseLocation"
]
}
// 选择新的位置
async chooseLocation() {
// 调用小程序 API 获取新的位置
const { latitude, longitude } = await wx.chooseLocation()
// 获取新的位置附近的小区
this.getPoint(latitude, longitude)
console.log('起点位置:', latitude, longitude)
},
getPoint(latitude, longitude) {
// 显示loading提示
wx.showLoading({
title: '正在加载...',
})
// 逆地址解析(根据经纬度来获取地址)
QQMap.reverseGeocoder({
location: [latitude, longitude].join(','),
success: ({ result: { address } }) => {
// console.log(address)
// 数据数据
this.setData({ address })
},
})
QQMap.search({
keyword: '住宅小区', //搜索关键词
location: [latitude, longitude].join(','), //设置周边搜索中心点
page_size: 5,
success: (result) => {
// console.log(result)
// 过滤掉多余的数据
const points = result.data.map(({ id, title, _distance }) => {
return { id, title, _distance }
})
// console.log(points)
// 渲染数据
this.setData({ points })
},
fail: (err) => {
console.log(err.message)
},
complete: () => {
// 隐藏loading提示
wx.hideLoading()
},
})
},
重新定位