微信小程序 获取用户位置信息_前端微信小程序获取微信填写的我的地址信息

参考链接：
（1）实现微信小程序获取用户当前城市的位置
http://www.angzhui.cn/zx/694.html
（2）【实战】在微信小程序中获取用户所在城市信息
https://developers.weixin.qq.com/community/develop/article/doc/000a8c2d0c04c813227b6da5651413

一、例子（1）

最近在开发小程序的时候，客户提出一个要求，就是他们的教育测评机构是在不同城市里的，可能一个机构在几个城市都有办公点，同时需要获取用户的当前城市的位置来展示不同的测评机构信息，不在当前城市的测评机构就不显示了。
获取用户当前位置的功能可以打开腾讯位置服务的网站，注册一个用户，然后申请一个KEY密钥，这样就可以配置KEY的信息了，如下图所示：

在填写了Key名称和描述后，需要勾选“微信小程序”，然后填写授权IP，勾选WebServiceAPI，选择“域名白名单”，这里就遇到了一个坑，注意不要在下面的编辑框填写任何内容，否则在运行小程序调用接口的时候会提示“请求来源未被授权， 此次请求来源域名： servicewechat.com”。第二个就是要在微信小程序平台里添加一个域名白名单，如下图所示：

这里有一个很有趣的情况，就是如果你在WebServiceAPI的域名白名单里填写了，上面的域名，那么即使你在微信小程序平台里添加上面的域名，也会提示“请求来源未被授权， 此次请求来源域名： servicewechat.com”。
然后就是下载qqmap-wx-jssdk1.0文件夹，将里的JS文件放到小程序的utils文件夹就可以使用。
小程序是用getUserLocation获取用户的位置，但需要用户授权才能成功获取，然后通过getLocation方法获取经度和纬度，然后需要用type:’wgs84’把经纬度转成百度的坐标，然后再使用getLocal方法获取用户的具体位置，这里需要使用到reverseGeocoder
方式(具体可以看小程序的开发文档，以上的方法小程序的开发文档都有讲到)，通过返回值就可以获取到用户的位置信息，如下图所示：

用户res.result.ad_info.city就可以得到所在的城市名称了，然后根据城市的名称，调用不同的测评机构信息展示给用户。

二、例子（2）

在《看啥好呢》中有个本地好看 Tab，进去后会获取用户当前所在城市，然后显示该城市的数据，并且显示在导航栏和 Tab 上。

微信小程序中，我们可以通过调用 wx.getLocation() 获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家，哪个城市等信息，该如何实现呢？

微信小程序中并没有提供这样的 API，但是没关系，有 wx.getLocation() 得到的经纬度作为基础就够了，其他的，我们可以使用其他第三方地图服务可以来实现，比如腾讯地图或百度地图的 API。

所以整个步骤（共两步）就是：

1. 在小程序中获取当前的地理位置，涉及小程序 API 为wx.getLocation，使用前需要用户授权 scope.userLocation。

代码如下

checkAuth(callback) {
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.userLocation']) {
        wx.authorize({
          scope: 'scope.userLocation',
          success() {
            wx.getLocation({
              type: 'wgs84',
              success(res) {
                callback(res.latitude, res.longitude)
              }
            })
          }
        })
      }
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中 type 的取值可以为：

• wgs84 意思返回 gps 坐标
• gcj02 返回可用于 wx.openLocation 的坐标。

运行后会提示如下信息，还需要在 app.json 中配置 permission 字段

查询文档后得知，得知需要如下配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}
1
2
3
4
5

desc 用于在弹出的授权提示框中展示，如下

允许后即可获取接口返回的信息，此过程会在右上角胶囊按钮上显示箭头图标。

{
  accuracy: 65;
  errMsg: "getLocation:ok";
  horizontalAccuracy: 65;
  latitude: 30.25961; // 纬度，范围为 -90~90，负数表示南纬
  longitude: 120.13026; // 经度，范围为 -180~180，负数表示西经
  speed: -1;
  verticalAccuracy: 65;
}
1
2
3
4
5
6
7
8
9

其中，latitude 和 longitude 即是我们需要的两个字段。

2. 把第 1 步中获得的经纬度信息通过腾讯地图的接口逆地址解析，涉及腾讯地图接口为 reverseGeocoder(options:Object)

以腾讯地图为例，我们可以去腾讯地图开放平台注册一个账号，然后在它的管理后台创建一个密钥(key)，以及进行 KEY 设置，按照微信小程序 JavaScript SDK入门（微信小程序JavaScript|SDK https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview）及使用限制文档。

在 KEY 设置的启用产品中，勾选 WebServiceAPI，选择签名校验方式，因为我是使用云开发的方式，所以没有什么域名也没有授权 IP。

代码逻辑如下。

import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js'
let qqmapsdk
Page({
    onLoad: function (options) {

      // 实例化API核心类
      qqmapsdk = new QQMapWX({
         key: '开发密钥（key）'    // 必填
      });
      this.checkAuth((latitude, longitude) => {
         // https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
         qqmapsdk.reverseGeocoder({
           sig: 'KEY设置中生成的SK字符串',    // 必填
            location: {latitude, longitude},
            success(res) {
                wx.setStorageSync('loca_city', res.result.ad_info.city)

            },
            fail(err) {
               console.log(err)
               wx.showToast('获取城市失败')
            },
            complete() {
               // 做点什么

            }
         })
      })
    }
}）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

reverseGeocoder 接口返回的结果，这里面的字段比较多，详细可以看接口文档，里面好几个字段可以取到城市，其中 ad_info 是行政区划信息，我就取这里面的 city 了。