微信小程序开发者账号-微信小程序微商城开发

一、准备工作

参考

1.1注册腾讯位置服务账号

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

本文要介绍的是其中的逆地址解析

1.2.申请开发者密–钥

1.3.开通webserviceAPI服务

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

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

1.4.下载微信小程序JavaScriptSDK

1.5.安全域名设置

微信公众平台登录你的小程序->开发->开发设置->服务器域名->将填入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)

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

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)
          }
        })
      }
    })
  }

完成。

水平有限，欢迎交流。

觉得有用请点个赞。