HTTP环境下Google地图无法使用，getCurrentPosition()报错求助

嗨，这个问题我之前刚踩过坑！现在主流浏览器都对地理定位API加了安全限制——navigator.geolocation.getCurrentPosition()必须在安全上下文里才能运行，简单说就是你的网页得通过HTTPS协议访问，或者是本地的localhost环境（浏览器默认把localhost当成安全环境）。你碰到的报错，就是因为当前网页用的是HTTP协议，属于不安全连接，浏览器直接禁用了这个API。

具体解决方案 #

1. 切换到安全访问环境 #

• 本地开发：直接用localhost或者127.0.0.1访问页面，别用局域网IP（比如192.168.x.x）或者HTTP域名，这样地理定位API就能正常工作了。
• 生产环境：给网站配置HTTPS证书，现在很多云服务商、域名提供商都有免费的SSL证书可以用，配置完成后用HTTPS访问页面，就能彻底解决这个问题。

2. 给代码加上错误处理（很重要！） #

你原来的代码没处理getCurrentPosition()的错误场景，建议补上第二个回调函数，这样能清楚知道具体出了什么问题——比如用户拒绝授权、位置获取超时等，也能给用户友好的反馈。

修改后的代码示例：

function initialize() {
  if (navigator.geolocation) {
    // 成功回调 + 错误回调
    navigator.geolocation.getCurrentPosition(
      function (p) {
        var sMap = null;
        var marker = null;
        sMap = new GMaps({
          div: '#regestration-map',
          zoom: 13,
          lat: p.coords.latitude,
          lng: p.coords.longitude
          // 你的其他配置可以继续写在这里
        });
        // 给当前位置加个标记
        sMap.addMarker({
          lat: p.coords.latitude,
          lng: p.coords.longitude,
          title: '我的当前位置'
        });
      },
      function(error) {
        // 针对性处理不同错误
        switch(error.code) {
          case error.PERMISSION_DENIED:
            alert("你拒绝了位置权限请求，无法获取当前位置");
            break;
          case error.POSITION_UNAVAILABLE:
            alert("暂时无法获取你的位置信息");
            break;
          case error.TIMEOUT:
            alert("获取位置超时，请重试");
            break;
          case error.UNKNOWN_ERROR:
            alert("获取位置时发生未知错误");
            break;
        }
      }
    );
  } else {
    alert("你的浏览器不支持地理定位功能");
  }
}

额外提醒 #

• 就算是HTTPS环境，部分浏览器也会弹出权限请求，用户可能会拒绝，所以错误处理一定要加上，避免页面毫无反馈。
• 本地开发用服务器（比如XAMPP、Node.js服务器）时，务必用http://localhost:端口号访问，别用其他非安全地址。

内容的提问来源于stack exchange，提问作者Ravi Sapariya