评论

微信小程序定位授权,获取经纬度并转换为实际地址

介绍一下微信小程序获得用户定位授权,获取经纬度,对其逆地址解析转换为实际地址的流程

一、准备工作

参考 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

1.1注册腾讯位置服务账号

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

本文要介绍的是其中的逆地址解析
https://lbs.qq.com/

1.2.申请开发者密–钥

1.3.开通webserviceAPI服务


控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存

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

1.4.下载微信小程序JavaScriptSDK

http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

1.5.安全域名设置

微信公众平台登录你的小程序->开发->开发设置->服务器域名->将https://apis.map.qq.com填入request合法域名
这样在微信开发者工具就可以看到了:

腾讯位置服务是有免费额度的,每个key的每个服务接口的调用量如下:

日调用量:1万次 / Key
并发数:5次 / key / 秒

用来学习足够了。
至此,准备工作已经全部完成。

二、实践

2.1加入JavaScriptSDK

理论上可以随便放入一个文件夹。但是程序员做事应该有条理一点。
创建一个工具类文件夹 untils,将qqmap-wx-jssdk.js放入。

//在要使用服务的页面
var QQMapWX = require('../../untils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '你在腾讯位置服务申请的key'
        });
    },

2.2.获取用户定位授权

wx.authorize(Object object)

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。更多用法详见 用户授权

function () {
    var that = this
    wx.authorize({
      scope: 'scope.userLocation',//发起定位授权
      success: function () {
        console.log('有定位授权')
      //授权成功,此处调用获取定位函数
      }, fail() {
 //如果用户拒绝授权,则要告诉用户不授权就不能使用,引导用户前往设置页面。
        console.log('没有定位授权')
        wx.showModal({
          cancelColor: 'cancelColor',
          title: '没有授权无法获取位置信息',
          content: '是否前往设置页面手动开启',
          success: function (res) {
            if (res.confirm) {
              wx.openSetting({
                withSubscriptions: true,
              })
            } else {
              wx.showToast({
                icon: 'none',
                title: '您取消了定位授权',
              })
            }
          }, fail: function (e) {
            console.log(e)
          }
        })
      }
    })
  }

2.3. 获取定位信息并进行逆地址解析

如果用户同意了授权,就可以获取定位信息了,调用wx.getLocation(Object object)
调用成功就会返回位置信息:

然后调用SDK的reverseGeocoder(options:Object)进行逆地址解析:

代码如下:

//此函数在用户定位授权成功后调用
function () {
   wx.getLocation({//获取地址
      type: 'gcj02',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        console.log(latitude, longitude, speed, accuracy)
        qqmapsdk.reverseGeocoder({//SDK调用
          location: { latitude, longitude },
          success: function (res) {
            console.log(res)
          }
        })
      }
    })
  }

完成。
水平有限,欢迎交流。
觉得有用请点个赞。

最后一次编辑于  2020-11-12  
点赞 5
收藏
评论

6 个评论

  • 师傅
    师傅
    2021-04-17
    • 1.在小程序后台里面配置request合法域名:https://apis.map.qq.com
    • 2.移除你微信里面访问过该小程序的记录,然后重新扫码进,就行了,听我的没错。


    2021-04-17
    赞同
    回复
  • 啊染
    啊染
    2021-03-31

    请问按照步骤来的在2.3获取位置时出现TypeError: Cannot read property 'reverseGeocoder' of undefined at success是什么原因

    2021-03-31
    赞同
    回复 1
    • Pt.
      Pt.
      2021-04-01
      把出问题的代码截图发一下
      2021-04-01
      回复
  • JoJo
    JoJo
    2021-03-18

    勾选webserviceAPI时选择签名怎么弄啊,求大佬指点

    2021-03-18
    赞同
    回复 2
  • 姜龙
    姜龙
    2020-12-10

    作者,为啥我sdk文件无法下载呢,就是鼠标点了链接地址无反应

    2020-12-10
    赞同
    回复 3
    • Pt.
      Pt.
      2020-12-11
      是我文章中的地址吗,如果失效可以去这个里面 点击第三条后面链接   https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
      2020-12-11
      回复
    • 姜龙
      姜龙
      2020-12-11回复Pt.
      官方地址,是浏览器的问题,谷歌的下载不了,360的可以下载
      2020-12-11
      回复
    • Pt.
      Pt.
      2020-12-13回复姜龙
      哦哦 好的
      2020-12-13
      回复
  • Sean.Sun
    Sean.Sun
    发表于移动端
    2020-12-03
    可以实现实时跟踪定位吗?
    2020-12-03
    赞同
    回复 1
  • milooooooooooooooUp
    milooooooooooooooUp
    2020-12-02

    wx.openSetting 不能js触发了 得用户手动触发

    这个怎么优化比较自然?

    openSetting:fail can only be invoked by user TAP gesture.

    2020-12-02
    赞同
    回复 1
    • Pt.
      Pt.
      2020-12-03
      在开发者工具会报这个问题,真机测试没问题。
      2020-12-03
      回复
登录 后发表内容