问题原因分析 #

你遇到的这个情况，核心是Chrome桌面端的安全策略限制在起作用：

• Chrome很早就对非HTTPS站点（除了localhost本地回环地址）做了定位精度限制：这类站点无法获取WiFi/GPS级别的高精度定位，只能 fallback 到IP地址定位。而IP定位的精度完全依赖你的网络出口IP归属，如果本地网络的IP被归属到了其他地区，就会出现错误坐标。
• 你虽然给虚拟主机开了位置访问权限，但权限只是允许获取位置，Chrome依然会因为非HTTPS的原因，拒绝提供高精度数据源，只能用IP定位。
• 而Firefox对非HTTPS站点的定位限制没那么严格，Chrome移动端因为要适配移动场景（比如APP内嵌WebView），有特殊策略放宽限制，所以它们能拿到更准确的位置。

解决办法及Google Maps API精准定位实现 #

1. 给本地Apache站点配置SSL（推荐方案）

这是最彻底的解决方式，完全符合Chrome的安全规范，之后能稳定获取高精度定位：

• 用mkcert工具（或者OpenSSL）生成本地信任的自签名SSL证书，操作比想象中简单。
• 在Apache中启用SSL模块，配置443端口的虚拟主机，指定证书和私钥的文件路径。
• 在Chrome里导入自签名证书并设置信任，之后用HTTPS访问你的虚拟主机，调用navigator.geolocation就能拿到准确位置了。

2. 改用localhost访问本地站点

如果不想折腾SSL，可以把虚拟主机域名指向127.0.0.1，直接用localhost访问应用。Chrome对localhost放宽了HTTPS要求，允许获取高精度定位，这样也能拿到正确坐标。

3. 优化定位请求参数

在调用getCurrentPosition时，加上高精度请求参数，确保浏览器优先尝试高精度定位（不过这个在非HTTPS的非localhost站点里会被Chrome忽略，建议配合前两个方案使用）：

if(navigator.geolocation){ 
  navigator.geolocation.getCurrentPosition(function(position){ 
    var lat = position.coords.latitude, long = position.coords.longitude; 
    initMap(lat,long); 
    console.log(lat+" "+long) 
  }, 
  function(error) {
    console.error('定位失败:', error.message);
  },
  {
    enableHighAccuracy: true, // 强制请求高精度定位
    timeout: 5000, // 设置超时时间
    maximumAge: 0 // 不使用缓存的位置数据
  }); 
}

关于Google Maps API的精准定位

Google Maps API本身只是把你传入的经纬度渲染到地图上，所以只要浏览器能拿到准确的坐标，传给initMap函数，就能实现精准定位。上面的方案解决了浏览器获取准确坐标的问题，自然就能让Maps API显示正确位置。

内容的提问来源于stack exchange，提问作者Noble Eugene