微信小程序腾讯位置服务 - 逆地址解析、关键词搜索

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

一、引入SDK核心类，定义全局地图对象

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

在 onLoad() 方法中，实例化地图对象

// 实例化API核心类
onLoad: function () {
  qqmapsdk = new QQMapWX({
    key: '申请的key'
  });
}

二、获取地理位置信息、逆地址解析

data: {
  searchValue: '',
  addressRes: {}, // 逆地址解析结果
  aroundList: [] // 搜索结果列表
},
onLoad: function () {
  qqmapsdk = new QQMapWX({
    key: '申请的key'
  });
  this.getLocationInfo();
},
getLocationInfo() {
  // 获取地理位置信息
  wx.getLocation({
    type: 'gcj02',
    success: res => {
      // 逆地址解析
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: res.latitude,
          longitude: res.longitude
        },
        success: address => {
          this.setData({
            addressRes: address.result
          })
        },
        fail(error) {
          console.log('逆地址解析错误');
        }
      })
    },
    fail(error) {
      console.log('获取地理位置信息错误');
    }
  })      
}

这里需要注意 type，默认是 wgs84（国际标准坐标）返回 gps 坐标，而 gcj02（国测局坐标）返回可用于 wx.openLocation 的坐标，如果使用默认类型误差会很大。

三、关键词搜索

<view class="search-input">
  <input class="search-text" placeholder="请输入服务地址"  placeholder-style="color:#acacac;" value="{{searchValue}}"  bindinput="searchInput" />
</view>

searchInput(e) {
  this.setData({
    searchValue: e.detail.value
  })
  this.getAddressList(e.detail.value)
},
getAddressList(value) {
  qqmapsdk.search({
    keyword: value,
    region: this.data.addressRes.address_component.city,
    location: {
      latitude: this.data.addressRes.location.lat,
      longitude: this.data.addressRes.location.lng
    },
    success: res => {
      this.setData({
        aroundList: res.data
      })
    },
    fail: res => {
      this.setData({
        aroundList: []
      })
    }
  })
}

这里的搜索是使用腾讯地图的 search 接口实现的。

当然，我这里只是使用到了腾讯位置服务的逆地址解析、关键词搜索两个接口，大家如果想要使用其他接口，可以在腾讯位置服务微信小程序JavaScript SDK中查找。

最后编辑于：2020.03.19 16:16:15