麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

「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可以选gcj02wgs84 两种方式,这里我们选了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前端开发的一个变种,借助于微信平台屏蔽了硬件、软件上的不少差异,所以开发体验还是不错的,虽然有不少限制,甚至有点繁琐。

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
微信打赏
支付宝打赏
手机阅读
麻辣GIS微信打赏
请小编吃包辣条
麻辣GIS支付宝打赏
请小编吃支雪糕

留言板(小编看到第一时间回复)