vue之 vue-baidu-map 百度地图定位不准确有偏差的解决方法 - Go语言中文社区

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);
},
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_38705449/article/details/103525592
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-06-28 01:40:15
  • 阅读 ( 4145 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢