地理定位-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
腾讯位置服务—逆地址解析 QQMap.reverseGeocoder
思考
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() 找到周边的信息。 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 })
}
})
},
})
视图渲染
wx:for="{{points}}" wx:key="id" title="{{item.title}}" link-type="navigateTo" url="/house_pkg/pages/building/index?point={{item.title}}" is-link /> 重新定位-wx.chooseLocation 效果 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() }, }) }, 模板