VUE之 VUE-BAIDU-MAP 百度地图定位不准确有偏差的解决方法

vue环境下使用百度地图定位发现,地图定位不准确,有偏差,带红叉的是我们赋值的没有转换坐标的定位,对号是我们转换了坐标以后的定位,相对来说转换的坐标是符合我们的定位要求的,为什么会出现这样的差别呢,那先来看看坐标的种类:

目前国内主要有以下三种坐标系:

WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。

非中国地区地图,服务坐标统一使用WGS84坐标。

百度对外接口的坐标系为BD09坐标系,并不是GPS采集的真实经纬度,在使用百度地图JavaScript API服务前,需先将非百度坐标通过坐标转换接口转换成百度坐标。

image.png

原始坐标

handler ({BMap, map}) {
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function (position) {
      if (this.getStatus() == 'BMAP_STATU_SUCCESS') {
         this.center.lng = this.longitude 
         this.center.lat = this.latitude
         this.zoom = 14
      }
  })
}

 处理过的坐标

handler ({BMap, map}) {
      var x = this.longitude;
        var y = this.latitude;
        var ggPoint = new BMap.Point(x,y);
        //地图初始化
        var bm = new BMap.Map("allmap");
        bm.centerAndZoom(ggPoint, 15);
        bm.addControl(new BMap.NavigationControl());
        //添加gps marker和label
        var markergg = new BMap.Marker(ggPoint);
        bm.addOverlay(markergg); //添加GPS marker
        var labelgg = new BMap.Label("未转换的GPS坐标(错误)",{offset:new BMap.Size(20,-10)});
        markergg.setLabel(labelgg); //添加GPS label
      
        var translateCallback = function(data){//坐标转换完之后的回调函数
        console.log(data)
        console.log(data.status)
          if(data.status === 0) {
                var marker = new BMap.Marker(data.points[0]);
                bm.addOverlay(marker);
                var label = new BMap.Label("转换的GPS坐标(正确)",{offset:new BMap.Size(20,-10)});
                marker.setLabel(label); //添加百度label
                bm.setCenter(data.points[0]);
          }
        }
        
        //坐标转换完之后的回调函数
        setTimeout(()=>{
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 1000);
},

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vue-baidu-map是基于百度地图API开发的Vue组件,它能够在Vue项目中轻松地集成百度地图。而离线百度地图是指在没有网络连接的情况下能够使用的百度地图。 正常情况下,百度地图需要联网才能显示地图和获取相关数据。但是在有些场景下,比如地下车库或者偏远山区等网络较差或者没有网络的地方,就无法正常使用百度地图。离线百度地图就是解决这个问题的解决方案,它通过事先将地图数据下载保存在本地,使得在没有网络连接的情况下也能够正常使用百度地图。 对于vue-baidu-map来说,它的离线功能也是很重要的。通过使用vue-baidu-map的离线百度地图,开发者可以轻松地针对不同的场景选择不同的地图方案,提高用户的使用体验。而且离线百度地图对于一些隐私性、安全性要求高的应用场景也更加有优势。 总之,vue-baidu-map离线百度地图是一个非常实用与方便的工具,在实际生产中可以提供更好的用户体验,也为开发者提供了更多的选择与便捷。 ### 回答2: vue-baidu-map离线百度地图是一款基于Vue.js框架开发的百度地图组件库,主要解决的是在无网络或网络不稳定的情况下,无法使用在线地图的问题。该组件库提供的离线地图可以在无网络的情况下正常使用,并且具有与在线地图相同的功能和可视化效果。 在vue-baidu-map离线百度地图组件中,我们可以使用百度地图提供的基础地图、卫星地图、混合地图等多种地图样式,并且支持地名搜索、地图缩放、位置探测、路线规划等常用功能。此外,在使用vue-baidu-map离线百度地图时,我们也可以通过添加自定义数据层、自定义覆盖层等方式,对地图进行更加丰富的扩展和定制。 总之,vue-baidu-map离线百度地图是一款非常实用的地图组件库,它可以帮助我们在网络不稳定或者无网络的情况下,依然可以正常使用百度地图,并且具有完整的百度地图功能和美观的地图样式。如果你正在建设一个应用程序,需要集成离线地图功能,那么vue-baidu-map离线百度地图可能正是你需要的工具。 ### 回答3: vue-baidu-map是一个可嵌入Vue.js网站的地图组件,它集成了百度地图的API,可以让开发者轻松实现地图功能。 离线百度地图指的是一种不需要联网即可使用的百度地图,也就是地图数据被下载到本地储存设备上。vue-baidu-map支持使用离线地图,这就意味着用户可以在没有网络的环境下依然能够使用地图功能。 使用vue-baidu-map离线百度地图的优势在于,它提供了更好的用户体验和更高的灵活性。首先,用户无需担心网络不稳定、信号弱的问题,可以随时随地使用地图进行定位、浏览、搜索等操作;其次,开发者可以根据具体需求选择下载特定区域的地图数据,以减少数据流量和缩短加载时间;还可以根据不同需求切换在线地图和离线地图,达到最佳的用户体验。 总之,vue-baidu-map离线百度地图为开发者提供了便捷灵活的地图开发工具,让用户可以更加自由地使用地图服务。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值