H5 Geolocation API 遇到的坑及总结

Garlen2024/6/20大约 3 分钟

 if (navigator.geolocation)
    {
       navigator.geolocation.getCurrentPosition(function(position) {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);

          }, (e)=>{
            console.error(e);
          });
    }
    else
    {
        console.log("该浏览器不支持获取地理位置。");
    }

调试环境：手机端safari，Android 自带浏览器， PC---chrome edge Firefox

在本地开发时

使用localhost访问正常获取，使用本地ip获取失败

客户端	效果
safari	origin does not have permission to use geolocation service
Android	*GeolocationPositionError {code: 1, message: 'Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).'}
Chrome	*GeolocationPositionError {code: 1, message: 'Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).'}

本地调试只能使用localhost访问正常获取

“只有在安全来源的情况才才被允许”。错误信息里还包含了一个提示链接，我们不妨打开这个链接（https://goo.gl/Y0ZkNV）看看。原来，为了保障用户的安全，Chrome浏览器认为只有安全的来源才能开启定位服务。那什么样才算是安全的来源呢？在打开链接的页面上有这么一段话：

“Secure origins” are origins that match at least one of the following (scheme, host, port) patterns:
(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
This list may be incomplete, and may need to be changed. Please discuss!

大概意思是说只有包含上述列表中的scheme、host或者port才会被认为是安全的来源，现在这个列表还不够完整，后续可能还会有变动，有待讨论。

部署到HTTPS的域名下

在页面挂载后调用API获取经纬度，无任何交互手势

客户端	效果
Edge	正常
chrome	[Violation] Only request geolocation information in response to a user gesture.
iphone--safari	user denied geolocation
Android	正常

发起定位请求需要用户的手势来发起
safari 缺少用户授权。在iOS，重置定位权限的操作路径是：系统-通用-还原-还原位置和隐私。

扩展：Google 似乎建议不要在页面加载时加载地理位置：

用户对在页面加载时自动请求其位置的页面不信任或感到困惑。不是在页面加载时自动请求用户的位置，而是将请求与用户的手势联系起来，例如点击“查找靠近我的商店”按钮。确保手势清楚明确地表达了对用户位置的需要。

修改代码后由用户手势获取

客户端	效果
Edge	正常
chrome	Network location provider at 'https://www.googleapis.com/' : ERR_CONNECTION_TIMED_OUT.
safari	正常
Android	正常
Firefox	unknown error acquiring position