又是一个月,另一个 开发者大奖赛。这个月,我们希望你玩一些 不是 HTML5 堆栈的一部分 的东西,我们觉得它没有从开发者那里得到应有的关注:地理定位 API。Firefox 很早就支持这个 API,你可以用它做一些很酷的事情。
那么,什么是地理定位 API?本质上,它允许你检测你的产品用户当前的位置。位置数据可以通过不同的方式找到:GPS 定位、手机基站或无线热点位置。如果你在笔记本电脑上关闭无线网络,并且没有 3G 连接,API 就无法获取任何数据。
使用地理定位非常简单。你请求浏览器通过 navigator.geolocation
对象上的方法告诉你当前位置。
navigator.geolocation.getCurrentPosition(
success,
failure,
{ parameters }
);
其中 success 是浏览器找到位置时调用的函数,failure 是出现错误时调用的函数,properties 是一个可以包含一些参数的对象。参数是布尔值 enableHighAccuracy
、浏览器在请求新位置之前的位置 maximumAge
,以及浏览器在停止尝试查找位置之前的 timeout
(以毫秒为单位)。
每个函数(success 和 failure)都接收一个参数,用于执行你的编码操作。当一切顺利时,success 函数将接收一个 location 对象。这个 location 对象具有以下属性:一个告诉你读取时间戳的 timestamp,以及一个具有以下属性的 coordinates 对象:accuracy
、altitude
、altitudeAccuracy
、heading
、latitude
、longitude
和 speed
。
其中一些依赖于不止一次的读取,例如 heading 和 speed 是根据读取之间的纬度和经度的距离计算出来的。
在 Firefox 上,你有一个名为 address 的额外对象,它是对纬度和经度进行反向地理编码的结果。反向地理编码通常使用 API 完成,但在 Firefox 的情况下,它已经内置了。当我目前调用 getCurrentPosition
时,我在 Firefox 上得到了以下结果
Timestamp: 1315378919289 Coordinates: Accuracy: 18000 Altitude: 0 AltitudeAccuracy: 0 Heading: NaN Latitude: 50.06465 Longitude: 19.94498 Speed: NaN Address: City: Kraków Country: Poland CountryCode: PL County: Kraków County Postal Code: null Premises: null Street: Lubicz Street Number: 1
你可以 自己运行这个测试,并在 JSFiddle 上查看代码
failure 函数接收一个带有 code
属性的 error 对象。此属性可以有三个值:1 是权限被拒绝错误,2 是位置不可用错误,3 是超时错误。
除了 getCurrentPosition
方法之外,你还有 watchPosition
方法,它会在找到新位置时不断触发。参数相同,当你持续读取(例如在移动设备上)时,你将获得 heading
和 speed
的值。你可以使用 clearWatch
方法停止观察位置变化。
当你外出时,使用 watchPosition
非常酷。查看 地理定位演示页面,并使用底部的按钮打开和关闭观察位置。
本质上,这就是你手机上的地图应用程序所做的。
你能用它做什么?
嗯,你得到的是最终用户的纬度和经度。这可以与各种地理平台一起使用,例如 GeoNames,以便在你周围找到感兴趣的地方。
你也可以让人们在地图上为他们的朋友设置标记,与他们协作绘画,在你周围找到照片、推文或 Foursquare 签到 - 从纬度/经度开始,你可以做很多事情。
资源
- W3C 的 Geo API 规范
- MDN 上的 Geo API
- 另一个由 Remy Sharp 创建的 简单 Geo 演示
- Firefox 中的地理定位
- MDN 上的使用地理定位
我们很快就会举办关于地理定位的网络研讨会,敬请期待!
关于 Chris Heilmann
HTML5 和开放网络的布道者。让我们来修复它!