cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述
- cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位
- 用手机4g打开该页面,定位失败,返回错误信息:Get ipLocation failed.
- 手机连接wifi后,正常定位
分析
关于高德地图的定位逻辑,可以参考:
官方链接:Geolocation的定位流程以及定位失败的原因?
可以看到,其顺序是:
sdk辅助定位
浏览器原生定位接口
精确ip定位
这三种方式非常重要,后面我们的解决方案是基于此的
在wifi情况下,其定位通过抓包可以看到其使用的是ip定位,其实是比较慢的,而且既然其使用了ip定位,那么说明其前面两种方式没有成功。
对于sdk辅助定位,可以参考官方文档:新版辅助H5页面定位
这个是要求服务端和js使用端都要做相关配置的,这个在我们直接使用的情况下(服务端没有配置)是不生效的
那么问题来了,为什么浏览器原生定位接口失败了呢?
浏览器H5是可以通过navigator.location.getCurrentLocation来获取当前位置的,但是我们在我们的工程中直接使用此方法,发现如果加了超时时间,其会报错:message: Timeout expired。如果没有加超时时间,其会报错:Geolocation has been disabled in this document by Feature Policy.
尝试着就这两个错误(主要是后面这个错误)进行解决,无果。
于是邀请了android同事来查看问题,android同事果然专业,上来就提议一起看cordova的源码,debug进去。一进去果然发现了问题:
navigator.location.getCurrentLocation其会调用cordova-plugin-geolocation的geolocation.js中的getCurrentLocation方法,但是其src中的execute方法仅仅是处理了permission相关的东西,并没有进行任何实质意义上的定位。这个就很奇怪了。代码贴出来看一下
geolocation.js
看起来似乎是个死循环的调用,看不懂了
总之,就我们目前的技术水平,觉得浏览器原生定位接口这条路走不通了,不知道这是不是cordova某个版本下的一个问题
当然高德地图官方也说明了浏览器定位失败是有很多原因的
第一个问题没有解决,来看第二个问题:
wifi情况下通过精确ip定位定位成功,这还比较不错
但4g下,至少我们几个人的手机都是精确ip定位失败,100%的失败率,报错:Get ipLocation failed
高德官方的说法:
难道第二个问题也不解决了,任其如此了?
这个时候android的同事把目光投到了我们前面说的sdk辅助定位上。那问题三又来了,这个服务端哪里来呢?既然官方的cordova-plugin-geolocation不好用,那么有没有第三方的plugin呢?来到github,果然被发现了
https://github.com/ergoli/cordova-amap-location
直接src进去看了一下,完美的代码
这样就按照其介绍的方式,在高德开发者申请了android的key,生成sha1值。配好后果然可用,而且定位速度很快。
结论
1. 我的这位android同事厉害
2. 官方文档真的是要认真读,认真思考
cordova下使用高德地图js api在4g流量下定位失败问题的解决相关推荐
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- 高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情,点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
- 高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点 怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
- 高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明 我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位
使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...
最新文章
- 从USB闪存驱动器启动 Hiren的BootCD --制作U盘启动盘
- vmware workstation 下安装ubuntu
- maven仓库执行脚本(clearLastUpdated.bat)
- ASP.NET MVC增删改查
- poj2431 Expedition
- html定位fix,html 定位fixed
- metasploit 中文系统安装失败问题
- 让我当你的圣诞老人吧,派发3本技术好书
- hive应用实例 将查询结果写入原表中
- vue项目-jQuery中Nicescroll滚动条插件的用法
- 单元测试用例编写总结
- 有效提高关键词排名SEO技巧实论
- 【Android -- 职场】六个职场意识
- SAP的免安装的虚拟机,我装了好几个版本,各版本大小及电脑配置需求列举如下:...
- 中国污水源热泵运行现状分析与投资策略报告2022-2027年
- python车牌识别系统开源代码_python+opencv实现车牌定位功能(实例代码)
- 惋惜 | 北京这所211大学清退59名博士生!
- Java8 Stream流中的 collect() 方法,远比你想象中的强大
- Root mapping definition has unsupported parameters
- 微软携手云南打造软件产业高地 签约建立微软IT学院