三分钟学会微信小程序地图定位

地理定位-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 })}})},
})

视图渲染

{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()},})
},

模板

重新定位

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！