javascript - 关于网页调用百度地图定位不准的问题？

Question

调用了百度地图API，定位自己的位置，然而相差了至少几公里。
网上查的有说是html getcurrentposition和百度坐标有差别。然而都没有解决这个问题。
求大神解决！！！

Answer 1

请按照如下步骤排查你的代码：

1. 确保你的运行环境正常（直接使用百度地图看定位是否准确）以及代码没有基本逻辑错误

2. 使用百度坐标拾取器拾取你的目标位置,同时输出你代码里获取的坐标，两相比较排查错误

3. 考虑使用BMap.Convertor()进行坐标转换（参见下文第一种方式）

---

下面是关于这个问题的一些延伸

---

设备获取坐标转换到map后不准确的原因：

• 首先由于国家的保密政策，真实地理坐标是无法获取的，你所能得到的坐标都是经过加密插件（国家要求）出来的，国内的这套加密后的坐标系统被称为火星坐标系

• 然后我们需要明白的是，这个火星坐标在调用第三方地图进行绘制的时候是需要进行坐标转换的，这是因为不同的地图服务提供方有着其自己的坐标解析方式甚至是自己的坐标系，所以通过GPS设备获取的坐标需要经过所使用地图服务的转换才能正确定位

如此我们就能得到解决思路：

• 第一种方式为调用浏览器自身接口(NavigatorGeolocation.geolocation)后，再调用第三方map服务（百度地图等）提供的转换接口Convertor()转换坐标，最后进行绘制

• 第二种方式为使用第三方map服务提供的经过封装的定位API，一般都能做到获取位置后直接进行绘制（注意需要设置偏移量进行偏移校准，官网示例都有的）

相关案例关键代码：

我一般在项目里使用高德地图和百度地图，以此为例：

• 第一种方式+百度地图：

//绘制 
initBMap(BMap,position) { 
 
    let coords = position.coords; 

    let ggPoint = new BMap.Point(coords.longitude,coords.latitude); 

    //地图初始化 

    let bm = new BMap.Map("map"); 

    bm.centerAndZoom(ggPoint, 18); 

    bm.addControl(new BMap.NavigationControl()); 

    setTimeout(()=>{ 

        let convertor = new BMap.Convertor(); 

        let pointArr = []; 

        pointArr.push(ggPoint); 

        convertor.translate(pointArr, 1, 5, data => { 

          if(data.status === 0) { 

            let marker = new BMap.Marker(data.points[0]); 

            bm.addOverlay(marker); 

            let label = new BMap.Label("您的位置",{offset:new BMap.Size(20,-10)}); 

            marker.setLabel(label); //添加百度label 

            bm.setCenter(data.points[0]); 

          } 

        }) 

    }, 1000); 
   
} 

• 第二种方式+高德地图：

//解析定位结果 

onComplete(data) { 

    var str=['定位成功']; 

    str.push('经度：' + data.position.getLng()); 

    str.push('纬度：' + data.position.getLat()); 

    if(data.accuracy){ 

        str.push('精度：' + data.accuracy + ' 米'); 

    }//如为IP精确定位结果则没有精度信息 

    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否')); 

    document.getElementById('tip').innerHTML = str.join(''); 

} 

//解析定位错误信息 

onError(data) { 

    document.getElementById('tip').innerHTML = '定位失败'; 

} 

initAMap(AMap) { 

    let amap = new AMap.Map('map', { 

        resizeEnable: true, 

    }); 

    amap.plugin(["AMap.ToolBar"],()=>{ 

        amap.addControl(new AMap.ToolBar()); 

    }); 

    amap.plugin('AMap.Geolocation',()=>{ 

        let geolocation = new AMap.Geolocation({ 

            enableHighAccuracy: true,//是否使用高精度定位，默认:true 

            timeout: 10000,          //超过10秒后停止定位，默认：无穷大 

            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) 

            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false 

            buttonPosition:'RB' 

        }); 

        amap.addControl(geolocation); 

        geolocation.getCurrentPosition(); 

        AMap.event.addListener(geolocation, 'complete', this.onComplete);//返回定位信息 

        AMap.event.addListener(geolocation, 'error', this.onError);      //返回定位出错信息 

    }); 

}

补充说明：
上面的代码仅仅提供解决思路，请勿直接copy，善用API：

• 使用浏览器原生Geolocation API获取地理位置

• 关于坐标系加密的官方解释：百度地图--使用须知、高德地图常见问题--坐标转换

• 第三方地图封装后的地理位置获取API：百度地图、高德地图

• 原生坐标转换为第三方地图坐标示例接口：百度地图、高德地图

That's all...

Answer 2

哥们偏差多少啊 我偏差很大

Answer 3

一言不和换地图