发布于 

网站开发时经纬度坐标系的问题

前几日和 @CSSAcsllg 合作做一个用于社团定向越野活动的网站，需要用到定位功能，定位使用的是 HTML5 中的 getCurrentPosition()方法：

1
2
3
4
5
6
7
8
9
// 参考自 https://www.w3school.com.cn/html/html5_geolocation.asp
function getLocation(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess);
    }
}
function onSuccess(position){
    console.log(position.coords.latitude,position.coords.longitude);
}

如此可以通过手机浏览器的原生定位功能获得当前位置。但是将获取到的坐标信息通过百度地图 API 呈现以后，发现位置与实际存在偏移。初期以为是手机定位精度不高的问题，但是我们已经给 getCurrentPosition()方法添加了高精度选项的参数：

1
2
3
4
5
6
7
8
9
10
11
12
function getLocation(){
    
    var options = {
    	enableHighAccuracy: true, // 打开了获取高精度选项
        timeout: 5000,
        maximumAge: 1000
    }
    
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    }
}

所以应该不是精度的问题。在查看百度地图开放平台的 开发文档 后，看到了如下提示：

原来，从浏览器获取的坐标需要经过坐标系的加密转换以后才能在百度地图中正确显示，百度也提供了将 WGS84 和 GCJ02 坐标系转换为 BD09 的接口。经过转换后的坐标可以在地图上显示正确的位置。

虽然百度提供了转换接口，但由于不同浏览器使用的定位服务不同，有些会返回 WGS84 坐标，有些会返回 GCJ02 坐标。由于无法确定返回的是哪种，无奈增加了一个手动切换的按钮。用户可以自己根据实际定位情况 1 选择转换方式是 WGS84 到 BD09 还是 GCJ02 到 BD09.

我们也测试了几款浏览器返回的坐标类型2，结果如下：

编号 浏览器 坐标系 操作系统
1 Chrome WGS84 Android
2 Via WGS84 Android
3 荣耀手机自带浏览器 WGS84 Android
4 QQ 浏览器 WGS84 Android
5 搜狗浏览器 WGS84 Android
6 UC 浏览器 GCJ02 Android
7 Safari WGS84 iPadOS
8 夸克浏览器 GCJ02 Android
  1. 1.同一位置在两种坐标系下，地图显示会有显著的差异 ↩
  2. 2. 使用了我和 CSSAcsllg 的手机与 iPad，结果不一定完全正确 ↩
许可协议

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

分享文章