admin管理员组文章数量:1616032
地图定位是一个很要命的问题,目测下来在手机浏览器端基于微信生态的定位接口要精准情况好过直接用百度 LBS 等地图定位。百度地图好处是未获取到坐标会按 IP 走定位。
业务背景:后台通过百度地图拾取坐标,用户侧通过微信公众号进入H5端应用,利用微信自身的定位接口实现精准的定位坐标,并转化为百度坐标标准后提交后台计算距离。同时也要兼容下通过PC端微信版进入获取定位的问题。
所以看各自业务需求了。上代码投喂吧:
<div id="allmap" style="width:0px;height:0px;display:none;"></div>
<script type="text/javascript" src="https://3gimg.qq/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu/api?v=2.0&ak=百度AK值"></script>
<script type="text/javascript">
function isWechat() {
return /MicroMessenger/i.test(window.navigator.userAgent);
}
//根据自己的消息组件封装吧
function _msg(txt,type,url){
if (type==1){
return alert(txt);
}else{
if (type==200 && url.length>5){
setTimeout('location.href = "'+url+'"',3000);
return alert(txt);
}
return alert(txt);
}
}
function getLBS(){
if (!isWechat()){
console.log('开始走百度定位');
_msg('正在LBS定位',0);
getBMap();
}else{
_msg('正在定位',0);
wx.ready(function () {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed;
var accuracy = res.accuracy; // 位置精度
//将腾讯、高德地图经纬度转换为百度地图经纬度
let bd_lat;
let bd_lon;
let x_pi = 3.14159265358979324;
let x = longitude, y = latitude;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
longitude = z * Math.cos(theta) + 0.0065;
latitude = z * Math.sin(theta) + 0.006;
var data = {"lat":latitude,"lng": longitude};
console.log(data);
$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
cache("lbs",true);
markMap(longitude,latitude);
_msg(res.message,res.status);
}, "json");
},
fail: function(err) {
console.log('wx接口开始走百度定位');
getBMap();
//_msg("获取定位位置信息失败!",0);
},
cancel: function (res) {
console.log('wx接口开始走百度定位');
getBMap();
//_msg('用户拒绝授权获取地理位置',0);
}
})
console.log('wxread');
})
}
}
function markMap(lng,lat){
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.331398,39.897445),19);
map.enableScrollWheelZoom(true);
map.clearOverlays();
var new_point = new BMap.Point(lng,lat);
var marker = new BMap.Marker(new_point);
map.addOverlay(marker);
map.panTo(new_point);
getAddress(new_point);
}
function getBMap(){
var map = new BMap.Map("allmap");
var lat='116.331398';
var lng='39.897445';
var point = new BMap.Point(lat,lng);
map.centerAndZoom(point,18);
var navigationControl = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE,enableGeolocation: true});
map.addControl(navigationControl);
var geolocation = new BMap.Geolocation();
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.centerAndZoom(mk,18);
map.addOverlay(mk);
map.panTo(r.point);
getAddress(r.point);
var data = {"lat":r.point.lat,"lng":r.point.lng};
$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
_msg(res.message,res.status);
}, "json");
console.log('定位:'+r.point.lng+','+r.point.lat);
}else {
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.centerAndZoom(mk,18);
map.addOverlay(mk);
map.panTo(r.point);
getAddress(r.point);
var data = {"lat":r.point.lat,"lng":r.point.lng};
$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
cache("lbs",true);
_msg(res.message,res.status);
}, "json");
console.log('SDK定位:'+r.point.lng+','+r.point.lat);
}else {
return _msg('无法获取您当前的定位信息,您将无法签到!错误码:'+this.getStatus(),0,'');
}
});
}
});
//获取地址信息,设置地址label
function getAddress(point) {
var gc = new BMap.Geocoder()
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents
var address =
addComp.province +
addComp.city +
addComp.district +
addComp.street +
addComp.streetNumber //获取地址
console.log(address)
_msg(address,0);
})
}
}
版权声明:本文标题:记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728736018a1170903.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论