微信小程序之逆地址解析-一一网

这是我参与更文挑战的第6天，活动详情查看：更文挑战

1. 需求背景

小程序端获取到用户的地理位置信息, 然后将经纬度信息转换成具体的地址信息。

2. 实现方案

2.1 唤醒位置服务授权、获取经纬度.

A. 在app.json中开启位置服务权限

 "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用户小程序位置接口的效果展示"
    }
  }
复制代码

B. 编写代码触发唤醒授权面板-点击允许.
这里不考虑用户取消后、如何引导再次唤醒的场景.(此种场景在另外一篇文章有详细方案,感兴趣可戳:小程序用户拒绝授权弹窗后, 如何引导再次开启?

// wxml
<view bindtap="getLocation">获取经纬度</view>

// js
  getLocation: function() {
    const _this = this
    wx.getLocation({
      type: 'gcj02',
      success(res){
        // 大概会返回这么些信息
        // const res = {
        //   accuracy: 65,
        //   errMsg: "getLocation:ok",
        //   horizontalAccuracy: 65,
        //   latitude: 23.08331,
        //   longitude: 113.3172,
        //   speed: -1,
        //   verticalAccuracy: 65
        // }
      },
      fail(err){
        // 大概会返回这么些信息
        // const err = {errMsg: "getLocation:fail auth deny"}
      }
    })
  }
复制代码

这里可优化、最好改成是先获取用户当前的授权状态, 再去判定是否要调用wx.getLocation()API[用户关闭了位置、就算调用了接口、也会告诉你’getLocation:fail auth deny, 故考虑前置场景].
最终的代码如下:

  getLocation: function() {
    const _this = this
    wx.getSetting({
      success(res){
        const permissonName = 'scope.userLocation'
        if(res.authSetting[permissonName] === false){
          // 表示用户拒绝了授权、要引导再次开启可在这里搞动作

        }else{
          wx.getLocation({
            type: 'gcj02',
            success(res){
              this.getLocationName(res)
            },
            fail(err){
              // 这里调用接口失败了、要引导再次开启可在这里搞动作
            }
          })
        }
      }
    })
  },
  getLocationName: function(res = {}){
    const { latitude, longitude } = res
    // 逆地址解析
  }
复制代码

上面的getLocationName()就是要做逆地址解析业务逻辑的地方, 请接着往下看.

2.2 逆地址解析

2.2.1 开通腾讯位置服务

腾讯位置服务官网地址: lbs.qq.com/service/web…
A.登录微信公众平台-> 开发 -> 开发工具 -> 开发能力 -> 找到腾讯位置服务-> 点击开通.

B.点击后会跳转至腾讯位置服务官网、然后按照指引进行登录、授权即可。

能看到控制台、意味着小程序已成功开通腾讯位置服务sdk.

2.2.2 申请开发者密钥key

控制台-> 我的应用-创建应用-添加key。
如下是我已经创建好的key:

让看看编辑的界面:选择启用产品选项很重要.

WebServiceAPI
地图SDK(Android/IOS)
微信小程序-这里需要选择授权的APP ID

2.2.3 开通webserviceAPI服务

A. 控制台-> 应用管理 -> 我的应用 -> 添加key -> 勾选webserviceAPI -> 保存.
小程序SDK需要用到webserviceAPI的部分服务、所以使用该功能的key需要具备相应的权限.

2.2.4 下载微信小程序的JavaScriptSDK

sdk下载路径:
mapapi.qq.com/web/minipro…
mapapi.qq.com/web/minipro…
将下载好的文件解压至我们的项目目录中(假设放在我们根目录/libs目录下)

2.2.5 设置安全域名

这一步很重要、若跳过该步骤会直接报如下错误:”apis.map.qq.com不在以下request合法域名列表中“.

开通步骤: 微信公众平台管理后台 -> 开发 -> 开发管理 -> 开发设置 -> 服务器域名设置https的合法域名 -> 添加”apis.map.qq.com“
如下图:

至此, 逆地址解析的基础步骤已搭建完毕,请看demo演示.

3. Demo演示

<view bindtap="getLocation">获取经纬度</view>

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

const app = getApp()
let qqmapsdk

Page({
  onLoad: function() {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: '开发者密钥(KEY, 必填) -> 记得修改'  // 开发者密钥(KEY, 必填)
    });
  },
  getLocation: function() {
    const _this = this
    wx.getSetting({
      success(res){
        const permissonName = 'scope.userLocation'
        if(res.authSetting[permissonName] === false){
          // 表示用户拒绝了授权、要引导再次开启可在这里搞动作
        }else{
          wx.getLocation({
            type: 'gcj02',
            success(res){
              _this.getLocationName(res)
            },
            fail(err){
              // 这里调用接口失败了、要引导再次开启可在这里搞动作
            }
          })
        }
      }
    })
  },
  getLocationName: function(res) {
    const { latitude ,  longitude }  = res
    // 字符串类型
    const location = `${latitude},${longitude}`
    qqmapsdk.reverseGeocoder({
      location: location,
      get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
        console.log('逆地址解析', res);
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
  }
})
复制代码

运行上面的代码, 你会发现: network处有发送https请求: