几个前端H5定位组件的对比

HTML5 定位

HTML5的标准也出来很久了,定位已经不是什么新鲜的技术了。之所以写这个文章,主要是想将你直接调原生H5的方式和腾讯、高德定位组件进行一个对比,对比一下各自的优缺点,给广大使用者一个简单的参考,让你在在项目开发中更容易选择到合适自己的组件。😄

现状

如果想使用H5定位有三种可以选择:

  • 原生H5 API Geolocation
    原生的方式只要在支持的浏览器里面基本上能拿到经纬度,但是如果想拿到地理位置街道信息,就得配合自己公司提供的地理逆解析服务,我团也有这样的服务,其实就是个接口,经纬度传过去,返回对应的地理位置信息,但是总体来说逆解析的接到信息不够精确,偏差会有一些,第一次进来一般都会有一个弹窗,让你选择是否允许使用地理位置信息。

  • 腾讯H5定位组件
    腾讯的定位可以移步这里,腾讯地图开放平台,里面讲解了如何接入的方式,需要申请一个key和referer,如果key的调用量比较大,需要单独给腾讯地图团队发送邮件申请扩容,通过iframe的放入插入到页面中,更像一个黑盒,不需要了解里面太多的实现方式,也不需要写太多JS就能直接拿到一个返回对象,里面包括了经纬度,地址,城市,行政区id等,而且腾讯的定位和地图组件等针对手Q和微信做了针对性的优化,明显定位速度和精准度要比原生和高德好很多,demo地址可以移步这里,腾讯定位demo异步引入腾讯定位demo,一定要在手机上看,PC上腾讯定位是不成功的。

  • 高德定位组件
    高德定位组件的官方接入文档,可以移步这里高德开放平台,至于接入教程,我这里不想过多的讲解,而且网上一搜一大把,或者你按照官方文档做,就很容易实现了,主要想说一下高德的和腾讯的实现方式的区别,腾讯的一次返回经纬度街道信息,高德是先拿到经纬度,然后又在单独拿JS去调用他们的地理逆解析服务,分两步走,但是高德的JS包整体体积较大,开发者写代码较多,高德的选点组件也是如此,总体给人臃肿性能差的特点,但是PC上高德的要比腾讯的优势明显,腾讯的在PC上基本跪了100%拿不到定位信息。

经纬度坐标类型

摘自腾讯地图选点组件的官方文档
coordtype有下面这几种,腾讯地图接入默认等于5:

  1. GPS坐标
  2. sogou经纬度
  3. baidu经纬度
  4. mapbar经纬度
  5. [默认]腾讯、google、高德坐标
  6. sogou墨卡托

这里要提这件事情的原因是,如果你之前接的baidu,sougou地图的话,已经有些地址信息以经纬度存到数据库,从其他地图迁移高德或者腾讯地图的话,他们的坐标会有一个换算关系,所以选择接入的时候要考虑好,建议最好选择第五种腾讯、谷歌、高德这一类的。

对比

名称 PC端 移动端 速度 地理逆解析 允许弹窗 体积 社交app内嵌优化 学习成本 key&referer
原生定位 × × 经常有 ×
腾讯定位 × √(一次返回) 一天一次 较小(20k) 较小 需要申请
高德定位 略满 √( 二次调用) 偶尔会有 较大(80k) √(偶尔会有失败) 较大 需要申请

总结

优缺点也很容易从上面的表格中对比看出来,所以挑适合自己项目情况的使用吧,我们这边最终还是从高德迁移到的腾讯,主要出发点还是从性能角度考虑的,高德的定位包太大,而且开发者自己还得写不少代码,同样的地图选点组件也是,总的来说不如腾讯的省心,但是之前腾讯的有些bug,比如JS动态插入会有问题,每次定位显示弹窗,后我们这边提了一些反馈给他们后,还是修复的很快的,现在这些问题已经解决了。

不过还有一点是值得注意的,页面里多次调用只会返回最后一次的callback,你也可以针对这里自己处理一下,最后需要注意的还是,一定要记得申请Key容量和配额,否则访问量上来之后会使用不了的,提前要做好估量。

后续如果你在使用腾讯地图的各种组件中发现bug,可以联系微博私信反馈给我. 😄

完…