小程序中获取用户地理位置

---

1、获取用户当前地理位置

1.1 配置app.json

在小程序开发中，真正需要使用授权接口时，才向用户发起授权申请。如果需要获取用户当前地理位置，需要在授权申请中说明清楚要使用该功能的理由，需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。

参考官方文档，在app.json文件中添加如下示例代码：

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

1.2 调用函数进行请求

json文件配置好之后，就可以在需要发起用户地理位置请求的页面文件中调用相关函数了。根据实际需求选择小程序提供的API：wx.getLocation(Object object) ，文档说明

wx.getLocation({
 type: 'wgs84',
 success (res) {
   const latitude = res.latitude	//获取经度
   const longitude = res.longitude	//获取维度
   const speed = res.speed			//获取速度
   const accuracy = res.accuracy	//获取精度
   const altitude = res.altitude	//获取高度
 }
})

由于wx.getLocation(Object object)只能获取到经纬度数据，所以我们可以利用腾讯位置服务来进行逆地址解析，从而得到当前位置的具体省市县等详细地区信息。

2、腾讯位置服务应用

2.1 注册认证账号并配置key值

注册 -> 绑定开发者信息 -> key值配置 -> 程序开发

key值配置的时候要注意信息填写

最后一项 webServiceAPI选择授权IP之后留空即可，不然在请求时出现返回签名验证失败。已工单询问（具体答复为：目前小程序JavascriptSDK不支持签名，目前的解决办法是改为授权IP，然后配置框留空）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DzYe6H5P-1611817386394)(1066439-20190128161704680-250374937.png)]

2.2 利用其提供的 JavaScript SDK 实现开发

根据腾讯位置服务API提供的小程序SDK使用文档进行开发：

1. 申请开发者密钥（key）：申请密钥

2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

   (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

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

5. 小程序示例

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

使用reverseGeocoder(options:Object) 接口进行逆地址解析

官方示例：

<!--地图容器-->
<!--longitude及latitude为设置为调转到指定坐标位置，默认不显示-->
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}" scale='16' show-location>
</map>
<!--form表单-->
<form bindsubmit="formSubmit">
    <!--地址输入框,例：39.984060,116.307520-->
    <input style="border:1px solid #000;" name="reverseGeo"></input>
    <!--提交表单按钮-->
    <button form-type="submit">逆地址解析</button>
</form>
<view>当前位置为：{{markers[0].title}}</view>

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});  
 
//在Page({})中使用下列代码
//触发表单提交事件，调用接口
formSubmit(e) {
    var _this = this;
    qqmapsdk.reverseGeocoder({
      //位置坐标，默认获取当前位置，非必须参数
      /**
       * 
       //Object格式
        location: {
          latitude: 39.984060,
          longitude: 116.307520
        },
      */
      /**
       *
       //String格式
        location: '39.984060,116.307520',
      */
      location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      //get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var mks = [];
        /**
         *  当get_poi为1时，检索当前位置或者location周边poi数据并在地图显示，可根据需求是否使用
         *
            for (var i = 0; i < result.pois.length; i++) {
            mks.push({ // 获取返回结果，放到mks数组中
                title: result.pois[i].title,
                id: result.pois[i].id,
                latitude: result.pois[i].location.lat,
                longitude: result.pois[i].location.lng,
                iconPath: './resources/placeholder.png', //图标路径
                width: 20,
                height: 20
            })
            }
        *
        **/
        //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
        mks.push({ // 获取返回结果，放到mks数组中
          title: res.address,
          id: 0,
          latitude: res.location.lat,
          longitude: res.location.lng,
          iconPath: './resources/placeholder.png',//图标路径
          width: 20,
          height: 20,
          callout: { //在markers上展示地址名称，根据需求是否需要
            content: res.address,
            color: '#000',
            display: 'ALWAYS'
          }
        });
        _this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
          markers: mks,
          poi: {
            latitude: res.location.lat,
            longitude: res.location.lng
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
}

最后根据需要展示获取到的数据即可。