高德_浏览器定位是如何实现的?为什么会有浏览器定位失败的情况?

本文介绍高德地图开放平台JavaScript API中的Geolocation定位插件。该插件融合了HTML5 Geolocation接口、精确IP定位及安卓定位SDK,适用于PC端及移动端的定位需求。文章详细解释了定位流程、可能的失败原因及代码示例。

高德地图开放平台JavaScript API提供的Geolocation定位插件,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。其中与安卓定位sdk的结合使用适用于开发安卓系统的H5应用,需同时使用安卓定位sdk和JavaScript API。

 

PART1. Geolocation.getCurrentPosition获取精确位置的流程是什么样的?

在PC端,因为原生接口成功率很低,JavaScript API会优先调用精确IP定位服务,在IP定位失败的时候,尝试使用浏览器原生定位接口进行定位,如果原生定位接口也定位失败,则返回error事件或回调error信息。定位成功之后我们会对浏览器定位的经纬度结果进行向高德坐标的转化,并对所有有效定位结果融合地址信息后返回complete事件或者回调complete信息。

在移动端,如果开发者开启了sdk辅助定位,那么安卓手机上我们会优先尝试调用sdk的定位接口,失败之后优先调用浏览器原生定位接口进行定位,浏览器定位失败之后尝试进行精确IP定位,如果以上三种定位全部尝试失败则返回error事件或回调error信息,否则和PC端的一样,定位成功之后进行高德坐标转化和地址融合。

我们在定位的回调或者事件响应中返回了message字段,message字段明确指出了每一步的成败和失败原因。

 

PART2. getCurrentPosition定位失败的原因有哪些?

1.IP精确定位失败,message包含‘Get ipLocation failed.’信息,精确IP定位服务无法完全覆盖所有IP和用户,故而失败;

2.sdk定位失败,请检查sdk的key是否设置好,以及webview的定位权限及应用和系统的定位权限是否开启。

3.浏览器定位失败,有多种情况:

  1. 第一种情况,浏览器不支持原生定位接口,如IE较低版本的浏览器等,message字段包含‘Browser not Support html5 geolocation.’信息;
  2. 第二种情况,用户禁用了定位权限,需要用户开启定位权限,message字段包含‘Geolocation permission denied.’
  3. 第三种情况,浏览器禁止了非安全域的定位请求,比如Chrome、IOS10已陆续禁止,这时候需要升级站点到HTTPS,message字段也是包含‘Geolocation permission denied.’信息。注意Chrome不会禁止localhost等域名HTTP协议下的定位;
  4. 第四种情况,浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象,另外还有个别浏览器本身的定位接口就是黑洞,完全没有回应,也会超时返回失败,message字段包含‘Get geolocation time out.’信息;
  5. 第五种情况,确实定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高;

注释:如果定位到城市即可满足需求,建议大家改用Geolocation.getCityInfo方法,可以根据IP返回用户所在城市的基本信息,包括省、市名称、adcode、citycode、城市中心点,城市矩形边界等信息。


PART3. getCurrentPosition定位代码怎么写?

var  geolocation = new AMap.Geolocation();
        map.addControl(geolocation);
        //geolocation.getCurrentPosition(); //精准定位
        geolocation.getCityInfo();  //定位到城市
    });

在移动应用中嵌入 H5 页面时,高德地图定位功能无法正常工作,而在浏览器中却可以正常使用,这种情况通常与以下几个因素有关: ### 问题分析 1. **权限问题** 移动应用在嵌入 H5 页面时,H5 页面求的定位权限可能未被正确授予。Android 或 iOS 系统对 WebView 中的定位权限管理较为严格,需要在原生代码中主动申权限并允许 WebView 使用定位服务。例如,在 Android 中需要在 `AndroidManifest.xml` 中添加定位权限,并在 WebView 初始化时启用地理位置功能[^1]。 2. **HTTPS 与混合内容限制** 高德地图 API 通常要求使用 HTTPS 协议加载,而部分移动应用嵌入的 H5 页面可能未完全启用 HTTPS,或在 HTTPS 页面中加载了 HTTP 资源,导致浏览器阻止了定位求。需要确保页面使用 HTTPS,并且所有资源都通过安全协议加载[^3]。 3. **User-Agent 识别问题** 某些地图 API 会根据 User-Agent 判断客户端类型,如果 WebView 的 User-Agent 与浏览器不同,可能导致 API 返回不同的行为。可以尝试在 WebView 中设置与浏览器一致的 User-Agent 以绕过识别限制[^2]。 4. **跨域问题与 Cookie 管理** 如果 H5 页面与地图 API 之间存在跨域求,或者依赖 Cookie 来维持会话状态,WebView 中的 Cookie 管理机制可能不如浏览器完善,导致定位失败。需要确保 WebView 正确处理 Cookie,并在服务器端设置合适的 CORS 头部。 5. **WebView 内核差异** 不同厂商的 WebView(如 Android 上的系统 WebView 与 Chrome)对 HTML5 定位 API 的实现可能存在差异,尤其是在权限模型和 API 调用方式上。建议在开发中使用较新的 WebView 内核,并测试在不同设备上的兼容性。 ### 解决方案示例 - **Android 原生 WebView 配置示例**: ```java WebView webView = findViewById(R.id.webview); WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setGeolocationEnabled(true); // 启用地理位置 settings.setDomStorageEnabled(true); // 启用 DOM 存储 // 设置定位权限回调 webView.setWebChromeClient(new WebChromeClient() { @Override public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) { callback.invoke(origin, true, false); // 允许定位权限 } }); ``` - **检查并设置 User-Agent**: ```java String ua = "Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36"; settings.setUserAgentString(ua); ``` - **Nginx 反向代理配置(用于解决跨域与 HTTPS 问题)**: ```nginx server { listen 443 ssl; server_name map.test.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { proxy_pass https://apis.map.qq.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值