2.1 位置服务
位置服务(LBS)是基于用户的位置来提供服务的技术,通过要配合第三方的服务来实现,如腾讯地图、高德地图、百度地图等,在本项目采用的是腾讯的位置服务。
申请使用腾讯位置服务需要按如下步骤操作:
-
注册账号
-
创建应用
-
生成 key
-
小程序管理后台添加合法域名
步骤参考视频的介绍和官方文档来操作,在此就不缀述了。
在使用位置服务的时候需要提供用户的位置(经纬度),关于用户的位置小程序提供了 API ,在使用获取位置的 API 时需要先在 app.json
中进行声明,并在小程序管理后进行申请,相关限制请参考文档说明。
{
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
调用 wx.getLocation() 获取用户当前位置,该 API 支持返回 Promise:
Page({
async getLocation() {
// 调用 API
const {latitude, longitude} = await wx.getLocation()
console.log(latitude, longitude)
}
})
调用 wx.chooseLocation
会打开地图由用户自由选择一个位置后返回该位置的经纬度,该 API 支持返回 Promise:
Page({
async chooseLocation() {
// 调用小程序 API 获取新的位置
const {latitude, longitude} = await wx.chooseLocation()
console.log(latitude, longitude)
},
})
准备工作都完成了,接下来可以到项目中使用腾讯位置服务提供的功能了:
-
导入位置服务微信小程序 Javascript SDK,它是官方封装好的一个
.js
文件// utils/qqmap.js // 导入腾讯位置服务 SDK import QQMapWX from '../libs/qqmap-wx-jssdk' // 实例化位置服务(使用个人申请的 key) export default new QQMapWX({ key: '填写自已的 KEY', })
-
调用 SDK 提供的方法
search
实现搜索周边小区的功能// 导入腾讯位置服务 import QQMap from '../../../utils/qqmap' Page({ onLoad() { // 获取用户经纬度 this.getLocation() }, async getLoaction() { // 调用小和序 API 获取用户位置 const { latitude, longitude } = await wx.getLocation() // 获取周边小区 this.getPoint(latitude, longitude) }, getPoint(latitude, longitude) { // search 是实现地点搜索功能的方法 QQMap.search({ keyword: '住宅小区', //搜索关键词 location: [latitude, longitude].join(','), //设置周边搜索中心点 page_size: 5, success: (result) => { // 过滤掉多余的数据 const points = result.data.map(({ id, title, _distance }) => { return { id, title, _distance } }) // 渲染数据 this.setData({ points }) }, }) } })
将获取的小区信息渲染到页面上:
<!-- 检测用户登录状态 --> <authorization> <view class="locate"> <van-cell-group border="{{false}}" title="当前地点"> ... </van-cell-group> <van-cell-group border="{{false}}" title="附近社区"> <van-cell wx:for="{{points}}" wx:key="id" title="{{item.title}}" link-type="navigateTo" url="/house_pkg/pages/building/index" is-link /> </van-cell-group> </view> </authorization>
-
调用 SDK 提供的方法
reverseGeocoder
实现逆地址解析的功能,逆地址解析是指根据经纬度来获取具体的地址信息。// 导入腾讯位置服务 import QQMap from '../../../utils/qqmap' Page({ // ... getPoint(latitude, longitude) { // 逆地址解析(根据经纬度来获取地址) QQMap.reverseGeocoder({ location: [latitude, longitude].join(','), success: ({ result: { address } }) => { // 数据数据 this.setData({ address }) }, }) // search 是实现地点搜索功能的方法 QQMap.search({ keyword: '住宅小区', //搜索关键词 location: [latitude, longitude].join(','), //设置周边搜索中心点 page_size: 5, success: (result) => { // 过滤掉多余的数据 const points = result.data.map(({ id, title, _distance }) => { return { id, title, _distance } }) // 渲染数据 this.setData({ points }) }, }) } })
-
调用
wx.chooseLocation
重新选择位置// 导入腾讯位置服务 import QQMap from '../../../utils/qqmap' Page({ // ... chooseLocation() { // 调用小程序 API 获取新的位置 const { latitude, longitude } = await wx.chooseLocation() // 获取新的位置附近的小区 this.getPoint(latitude, longitude) }, getPoint(latitude, longitude) { // ... } })