vue中调用微信sdk获取地理位置 最后通过百度地图查出详细地址
首先需要申请百度地图key
在index.html中引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的key"></script>
第一 npm install weixin-js-sdk --save //在项目中安装
第二 在使用的页面引入 import wx from 'weixin-js-sdk'（可在main.js全局引入）
第三
//需要注意的是微信sdk获取地理位置和百度获取地理位置是已不同规范获取的 需要将微信sdk获取的经纬度转为百度地图的经纬度，不然会有偏差。这里可以使用gcoord .js转换（npm install gcoord --save）
//获取JS-SDK的页面必须先注入的配置信息(在mounted调用getJSSDKs方法)
getJSSDKs(){
let data={
url:location.href.split('#')[0]
}
getJSSDK(data).then(res=>{//后台接口，返回给前端签名啥的一些配置参数 必须！！
let _this=this
wx.config({
// debug: true, 调试用到
appId: res.appId, //必须参数（后台获取）
timestamp: res.timestamp, //必须参数（后台获取）
nonceStr: res.nonceStr, //必须参数（后台获取）
signature: res.signature,//必须参数（后台获取）
jsApiList: [
'getLocation',//必须 你要用到的api 必须在这里写，这里我只用到了获取地理位置的api
]
});
wx.ready(function(){
_this.getbylocation()
})
})
},
//！
//！
getbylocation(){
let _this=this
wx.getLocation({
type: 'wgs84',
isHighAccuracy:true,
success: function (res){
let [longitude, latitude] = gcoord.transform(//转换经纬度（npm install gcoord --save）上面有说
[ res.longitude, res.latitude ], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.BD09 // 目标坐标系
);
console.log('精度',longitude)
console.log('纬度',latitude)
_this.latitude =latitude
_this.longitude =longitude
let point = new BMap.Point(longitude,latitude)
let gc = new BMap.Geocoder()
gc.getLocation(point, function(rs){
console.log(rs)
// _this.location.address=rs.address
_this.location=rs.addressComponents
_this.location.creditProvince=rs.addressComponents.province
_this.location.creditCity=rs.addressComponents.city
_this.location.creditArea=rs.addressComponents.district
_this.location.creditStreet=rs.addressComponents.streetw
_this.location.streetNumber=rs.addressComponents.streetNumber
console.log('相差km数',_this.getDistance(_this.latitude,_this.longitude,_this.obj.y,_this.obj.x))
//_this.obj.x,_this.obj.y分别是调后台接口返回的目标打卡点的经纬度，_this.obj.targetrange是后台返回的打卡范围为多少km
if(_this.getDistance(_this.latitude,_this.longitude,_this.obj.y,_this.obj.x)>=_this.obj.targetrange/1000){
_this.message='不在打卡范围'
_this.status=false
}else{
_this.message='你已在打卡范围内'
_this.status=true
}
})
},
fail: function (err){
_this.$toast(err)
}
})
},
//
//
//
getDistance( lat1, lng1, lat2, lng2){//比较两个不同经纬度之间的距离
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;//km
},
