「GIS教程」小程序中的逆地址解析

在做 WebGIS 开发的时候，我们经常会做一些地址解析(地址转经纬度)、逆地址解析(经纬度坐标转换到地址的转换功能)，最近在做一个外勤小程序，需要一个定位打卡，正好也需要这个功能，这里简单说明一下实现过程。

先获取经纬度

微信小程序获取位置相对HTML5来说比较简单，不用处理那么多兼容问题，直接调用微信官方API即可。示例代码如下：

wx.getLocation({
  type: 'gcj02',
  success (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    const speed = res.speed
    const accuracy = res.accuracy
  }
})

其中type可以选gcj02及 wgs84 两种方式，这里我们选了gcj02，原因我们后面讲。

申请逆解析服务

目前百度、高德、腾讯这种互联地图的JavaScript API均提供了地址逆解析的功能，免费额度有所差异，大家可以根据自己的需求来选。

PS：即使在小程序的场景下，使用百度、高德的服务也是可以的，毕竟本质就是API Call嘛。

为了客户付钱方便，我们选用了本是腾讯同根的腾讯地图位置服务。地址： https://lbs.qq.com/，为了使用全部功能，建议进行认证，个人或者企业开发者都可以进行认证。

新建一个应用

在腾讯位置服务中新建一个应用，

然后添加一个key

这里要注意，一定要把WebServiceAPI勾选（因为它毕竟就是API Call嘛），然后填写上小程序的APP ID就可以了。

这里会得到一个Key，这个Key后面会在小程序中用到。

配置小程序合法域名

小程序中调用的所有域名需要一个安全设置，也就是说只有在这个白名单里的域名才可以访问。

在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

如图：

x

注意：这一步骤必不可少。

小程序中调用服务

下面就比较简单了，直接在小程序中调用腾讯位置的SDK方法就可以了，示例代码：

const QQMapWX = require("yoursdkpath/qqmap-wx-jssdk.min.js");
const qqmapsdk = new QQMapWX({
  key: "YOUR KEY",
});
const location = {
  longitude: '118.3233',
  latitude: '30.21244',
};
qqmapsdk.reverseGeocoder({
  location,
  success: (res) => {
    console.log(res);
  },
  fail:(error) => {
    console.log('fail---->', error)
  }
});

结尾

小程序开发其实也是HTML5前端开发的一个变种，借助于微信平台屏蔽了硬件、软件上的不少差异，所以开发体验还是不错的，虽然有不少限制，甚至有点繁琐。