微信小程序腾讯地图怎么用

200 阅读1分钟
  1. 可以使用 wx.getLocation 来获取设备所在经纬度,再用腾讯地图QQMap.reverseGeocoder方法解析地址,获取当前具体地址信息

使用wx.getLocation需要在app.json中进行配置

"requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
 ],
"permission": {
   "scope.userLocation": {
     "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
 },
  1. 登录腾讯位置服务配置密钥并下载js文件,文件放到libs文件夹中,再封装一个QQMap工具模块
    微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)

去官网下载这个qqmap-wx-jssdk.min
然后按官网配置KEY
下一步在你的项目根目录下创建libs文件夹,并将qqmap-wx-jssdk.min放进去
最后封装一个传入key的模块,方便使用

import QQMap from '../libs/qqmap-wx-jssdk.min'
export default new QQMap({
  key: '你的key'
})
  1. 使用QQMap.search方法来搜索附近地址,可以通过keyword传入搜索关键字,来指定查询目标
  2. 再需要重新定位时,使用wx.chooseLocation来显示周围地图详情,来精准选择位置,并返回新选择的
Page({
  data: {
    address: '',
    list: []
  },
  onLoad() {
    this.getMyLocation()
  },
  
  //获取经纬度
  async getMyLocation() {
    const {
      latitude,
      longitude
    } = await wx.getLocation()
    this.getPoint(latitude, longitude)
    this.searchLocation(latitude, longitude)
  },
  
  //解析经纬度,并获取地址
  getPoint(latitude, longitude) {
    QQMap.reverseGeocoder({
      location: latitude + ',' + longitude,
      success: (res) => {
        this.setData({
          address: res.result.address
        })
      }
    })
  },
  
  //搜索当前经纬度附近符合关键字的位置
  searchLocation(latitude, longitude) {
    QQMap.search({
      keyword: '住宅小区',
      location: latitude + ',' + longitude,
      success: (res) => {
        console.log(res.data);
        this.setData({
          list: res.data
        })
      }
    })
  },
  
  //根据当前位置重新定位
  async research() {
    const {
      latitude,
      longitude
    } = await wx.chooseLocation()
    this.getPoint(latitude, longitude)
    this.searchLocation(latitude, longitude)
  }
})