2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得

记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得

时间:2020-06-29 09:58:30

相关推荐

记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得

地图定位是一个很要命的问题,目测下来在手机浏览器端基于微信生态的定位接口要精准情况好过直接用百度 LBS 等地图定位。百度地图好处是未获取到坐标会按 IP 走定位。

业务背景:后台通过百度地图拾取坐标,用户侧通过微信公众号进入H5端应用,利用微信自身的定位接口实现精准的定位坐标,并转化为百度坐标标准后提交后台计算距离。同时也要兼容下通过PC端微信版进入获取定位的问题。

所以看各自业务需求了。上代码投喂吧:

<div id="allmap" style="width:0px;height:0px;display:none;"></div><script type="text/javascript" src="/lightmap/components/geolocation/geolocation.min.js"></script><script type="text/javascript" src="https://api./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 ~ -90var 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,'');} });}});//获取地址信息,设置地址labelfunction getAddress(point) {var gc = new BMap.Geocoder()gc.getLocation(point, function (rs) {var addComp = rs.addressComponentsvar address =addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber //获取地址console.log(address)_msg(address,0);})}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。