Vue通过微信定位+百度地图获取详细地理位置信息

项目中需要使用到定位功能，定位用户所在的省市，并自动填充到省市的选择列表中，微信开发中，定位功能直接使用微信提供的接口，方便并且简单，兼容性相对好处理

因为微信定位或者百度地图的定位都是先通过定位获取到用户的经纬度，然后需要再通过经纬度获取用户的详细地理位置信息。

一、在vue中需要安装jssdk

配置安全域名（参考官方文档）
引入微信的js文件，vue中可以直接npm安装也可以
npm install weixin-js-sdk --save
并在main.js中引入js：
import wx from ‘weixin-js-sdk’
并且将wx绑定到vue原型上，那么其他的所有组件都可以使用：
Vue.prototype.$wx = wx

通过config接口注入权限验证配置
在main.js中配置微信获取地理位置的权限接口

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

wx.ready(function(){
 
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
 
wx.error(function(res){
 
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

二、进行定位

直接在需要获取用户定位的组件中通过下面的代码就可以进行定位，获取用户的经纬度


// 最好是在ready函数中执行微信的接口
this.$wx.ready((res) => {
        this.$wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
            this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed // 速度，以米/每秒计
            var accuracy = res.accuracy // 位置精度
            console.log('纬度：' + this.latitude + '经度：' + this.longitude + 'accuracy：' + accuracy)

          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
      })

三、通过经纬度获取详细位置信息

这里通过百度地图的api来逆序，通过经纬度获取定位的详细信息，也可以通过腾讯地图，高德地图等，参考各自官方的开发文档即可

引入百度地图的js（去官方申请免费的key即可）
在vue项目的index.html中引入即可：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<申请的key>"></script>
通过百度地图转换经纬度为地理信息

 	let point = new BMap.Point(this.longitude, this.latitude)
    let gc = new BMap.Geocoder()
    gc.getLocation(point, function(rs){
      const addComp = rs.addressComponents
      // 可以通过addComp对象获取到省、市、县、区、街道多少号等信息
      const province = addComp.province
   
      console.log('addComp json: ' + JSON.stringify(addComp))
      console.log('province' + addComp.province)
    })

所以，将微信定位和百度地图的代码整理，获取地理位置：

在浏览器控制台和IDE中，可能会报BMap未定位警告，没有关系，可以正常使用


const _this = this
this.$wx.ready((res) => {
        this.$wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            _this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
            _this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed // 速度，以米/每秒计
            var accuracy = res.accuracy // 位置精度
            console.log('纬度：' + _this.latitude + '经度：' + _this.longitude + 'accuracy：' + accuracy)

            let point = new BMap.Point(res.longitude, res.latitude)
            let gc = new BMap.Geocoder()
            gc.getLocation(point, function(rs){
              console.log(rs)
              const addComp = rs.addressComponents
              // 获取省份
              const province = addComp.province
              if(province) {
              	// 如果这里需要操作this,那么需要在外部重新绑定一下this
                // _this.provinceName = province
              }

              alert('addComp json: ' + JSON.stringify(addComp))
              console.log('province' + addComp.province)
            })
          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
      })

原文链接：https://blog.csdn.net/weixin_42054155/article/details/102808957