vue 微信公众号获取定位经纬度腾讯地图逆地址解析为具体地址

最近做项目需要用到微信公众号获取定位，并将定位转换为具体地址的需求，找了挺多，最后整理下，分享给大家~

我这里使用的是腾讯地图，也可以使用其他的如百度、高德等。

思路是，先使用微信开放文档的获取定位接口进行获取定位（这里的定位是经纬度），然后使用腾讯地图将经纬度定位转换为具体所在的地址。

前提准备：

1、首先先申请一个腾讯地图key

网址为：申请腾讯地图的开发者key https://lbs.qq.com/console/mykey.html?console=mykey，申请完以后是这样

2、项目安装 wx依赖

npm install weixin-js-sdk --save-dev

接下来就是代码操作：

1、先要引入wx和腾讯地图

在项目的index.html页面引入腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=自己的key"></script> <!-- 腾讯地图 -->

在需要获取定位的页面引入wx

//引入微信
import wx from 'weixin-js-sdk'

2、接下来就是获取微信定位

在获取微信定位的时候，要先通过config接口注入权限验证配置，获取配置信息里面的内容是后端接口给出的，所用的接口域名一定要备案。

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

	wx.config({
	  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	  appId: '', // 必填，公众号的唯一标识
	  timestamp: , // 必填，生成签名的时间戳
	  nonceStr: '', // 必填，生成签名的随机串
	  signature: '',// 必填，签名
	  jsApiList: [] // 必填，需要使用的JS接口列表
	});

具体代码如下：（在<script></script>标签中）

data () {
      return {
        configContent: [],
        address: []
      }
    },

mounted () {
      this.setWxjs()
    },

setWxjs () {
        let url = encodeURIComponent(window.location.href.split('#')[0])
        this.$axios.get('这里是后端提供的接口?url=' + url).then(res => {
          if (res.data.code === 0) {
            this.configContent = res.data.data
            this.signWX()
          }
        })
      },

signWX () {
        let _this = this
  
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: this.configContent.appId, // 必填，公众号的唯一标识
          timestamp: this.configContent.timestamp, // 必填，生成签名的时间戳
          nonceStr: this.configContent.nonceStr, // 必填，生成签名的随机串
          signature: this.configContent.signature, // 必填，签名
          jsApiList: ['checkJsApi', 'openLocation', 'getLocation', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        })
        wx.checkJsApi({
          jsApiList: ['getLocation'],
          success: function (res) {
            // alert(JSON.stringify(res));
            if (res.checkResult.getLocation === false) {
              alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！')
              return false
            }
          }
        })
        wx.ready(function () {
          wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
              // 获取经纬度
              var latLng = new qq.maps.LatLng(res.latitude, res.longitude)
              getAddr.getAddress(latLng)
            },
            cancel: function (res) {
              alert('用户拒绝授权获取地理位置')
            }
          })
        })
        wx.error(function (res) {
          console.log('微信js-sdk 配置失败000' + res.errMsg)
          // alert('微信js-sdk 配置失败000' + res.errMsg)
        })
        // 调取腾讯地图
        var getAddr = new qq.maps.Geocoder({
          complete: function (res) {
            _this.address = res.detail
            var allAddress = res.detail.addressComponents
            // _this.address = res.detail.nearPois
            var address = res.detail.address
            // alert('地址：' + JSON.stringify(_this.address))
            console.log('地址：', address, allAddress.province, allAddress.city, allAddress.district)
            // alert('地址：' + address + allAddress.province + allAddress.city + allAddress.district)
          }
        })
      }

以上就是关于微信获取定位经纬度，并通过腾讯地图调用逆地址解析的方法将微信获取到的经纬度转换为具体的地址，如北京市朝阳区，有哪里理解的不对的地方，欢迎指正~

vue 微信公众号获取定位经纬度 腾讯地图逆地址解析为具体地址