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

地理定位-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渲染页面
 

 <van-cell-group border="{{false}}" title="当前地点">
  <van-cell title="{{address}}" border="{{false}}">
    <text bind:tap="chooseLocation" class="enjoy-icon icon-locate">重新定位</text>
  </van-cell>
</van-cell-group>

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

视图渲染

<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?point={{item.title}}"
    is-link
  />
</van-cell-group>

重新定位-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()
    },
  })
},

模板

<view class="locate">
  <van-cell-group border="{{false}}" title="当前地点">
    <van-cell title="{{address}}" border="{{false}}">
      <text bindtap="chooseLocation" class="enjoy-icon icon-locate">重新定位</text>
    </van-cell>
  </van-cell-group>