本文介绍如何在网页中结合微信JS-SDK与百度地图API实现用户地理位置的获取与显示。通过微信JS-SDK的getLocation接口获取用户允许分享的地理位置信息，再利用百度地图API将经纬度转换为具体地址，实现精准定位。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2Yfo6bWIvXjCDyuA8ArqF3QU0VP38Tzs"></script>
<script>
var geolocation = new BMap.Geolocation();
var geoc = new BMap.Geocoder();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
setLocation(r.point);
console.log('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
console.log('failed'+this.getStatus());
}
});
function setLocation(point){
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
//$("#start").val(result);
//$("#start_location").val(result);
console.log(addComp);
})
}
微信获取经纬度
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//弹窗样式
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2Yfo6bWIvXjCDyuA8ArqF3QU0VP38Tzs"></script>
var url="window.location.href";
var jsConfig = {
debug: false,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'getLocation'
]
};
$.post('{url("wechat/jssdk/index")}', {url: url}, function (res) {
if(res.status == 200){
jsConfig.appId = res.data.appId;
jsConfig.timestamp = res.data.timestamp;
jsConfig.nonceStr = res.data.nonceStr;
jsConfig.signature = res.data.signature;
// 配置注入
wx.config(jsConfig);
// 事件注入
wx.ready(function () {
wx.onMenuShareTimeline(shareContent);
wx.onMenuShareAppMessage(shareContent);
wx.onMenuShareQQ(shareContent);
wx.onMenuShareWeibo(shareContent);
wx.onMenuShareQZone(shareContent);
wx.getLocation({
type: 'wgs84',
complete:function(argv){
if(argv.errMsg=="getLocation:fail"){
var gc = new BMap.Geocoder();
var pointAdd = new BMap.Point(res.longitude, res.latitude);
gc.getLocation(pointAdd, function(rs){
var city = rs.addressComponents.city;
$.post("{url('WxajaxGeo')}",{'city':city},function(data){
$('.location-left-cont').html(data);
$(".adr").append("<strong>当前定位:"+data+"</strong>");
})
}
);
}else{
}
},
cancel: function (res) {
$.post("{url('AjaxGeo')}", function(data){
$('.location-left-cont').html(data);
$(".adr").append("<strong>当前定位:"+data+"</strong>");
})
}
});
});
}
}, 'json');
</script>
扫一扫
831