通过浏览器的地理位置(geolocation)API 获取用户坐标

陪她去流浪 桃子 2017年02月07日 编辑 阅读次数:3594

博客本身有说说这个功能,但只记录了发表时间。我觉得应该多留下一些信息,比如地理位置,就像 QQ空间 一样。

好在 HTML5 有 地理位置API(GeoLocation),非常方便,一句话就可以拿到当前用户的地理位置。 不像以前的通过 浏览器IP 方式获取用户地理位置那样单纯。GeoLocation 通过多种获取渠道来提高获取精度。

  • GPS
  • IP地址
  • 周围的 WIFI 热点
  • 蜂窝网络基站

于是,GeoLocation 通常来说提供了非常高的精度,甚至可以精度到 1~5 米。但是,地理位置属于隐私信息,只有在用户明确允许的情况下才能获取到。

简单举例介绍下用法吧,详细的文档见前面的文档就好了,没必要全部翻译过来。

先确定下浏览器是否支持 GeoLocation('geolocation' in navigator):

1
2
3
4
// 因为要在用户允许后才能拿到(并且获取需要一定的时长),所以参数是回调形式
navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude, position.coords.longitude);
});

没错,简单到没朋友,(浏览器应该会气泡提示是否允许获取地理位置)。

完整的参考文档及示例见前面的文档。

注意,这个 API 获取到的只是地图坐标(GPS坐标,wgs84 标准),要想获取具体街道(建筑物)等名字,还需要通过“逆地理位置解析”。下一篇文章将继续介绍通过国内的三家主要的地图厂商(腾讯地图、高德地图、百度地图)来获取上述具体信息。

标签:javascript · HTML