小程序地图功能及腾讯位置服务SDK获取当前位置名称并显示

前言

最近有一个小程序的开发需求：获取当前用户的定位，并显示在自定义的地图上，然后需要获取当前的地理位置名称。

实现

wx.getLocation

微信自带的函数可以获取一些信息，比如经纬度还有其他，具体的参数可以看文档。
这就是wx.getLocation获取的json结果：

accuracy: 65
errMsg: "getLocation:ok"
horizontalAccuracy: 65
latitude: 31.36897
longitude: 120.64247
speed: -1
verticalAccuracy: 65

可以看到，虽然可以获取经纬度，但是你无法准确获取所在位置的名称。

如果仅仅需要经纬度，那自带的就足够了。

腾讯位置服务

腾讯位置服务提供了一个SDK，可以支持多种设备进行调用，获取一些位置相关的服务。当然这个有免费版和收费版，开发免费版足够了。

微信小程序相关的文档在此，主要的流程文档上也写清楚了：

1. 申请开发者密钥（key）：申请密钥
2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
   (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

申请key

首先就是在腾讯位置服务里面创一个可以调用的key，填入相关信息后完成创建，这个key后面会用到。

安全域名设置

登录你的小程序的微信公众平台，在微信公众平台处添加request合法域名，位置在开发->开发设置->服务器域名处

小程序

下面就是一些关键代码了。

js

首先导入SDK，然后利用SDK的方法获取相关信息，返回的json里面包含地理位置名称，代码如下：

var QQMapWX = require('../../libs/qqmap-wx-jssdk1/qqmap-wx-jssdk.js');
var qqmapsdk;

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

    // 直接获取地址
    var that = this
    qqmapsdk.reverseGeocoder({
      success: function (res) {
        //获取当前地址成功
        console.log(res);
        that.setData({
          latitude: res.result.location.lat,
          longitude: res.result.location.lng,
          address: res.result.address
        })
      },
      fail: function (res) {
        console.log('获取当前地址失败');
      }
    })

wxml

这里设置了一个隐藏的input，复制了地理位置名称，这样提交form表单的时候就可以一起提交了。

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" name="map" bindmarkertap="markettap" bindregionchange="regionchange" show-location style="width:100%;height:100px;">
</map>
<view class="section__title">{{address}}</view>
<input name="address" style="display: none;" value='{{address}}'/>