地球上的哪里?本月的开发者大奖赛将全部围绕地理定位展开。

又是一个月,另一个 开发者大奖赛。这个月,我们希望你玩一些 不是 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 对象:accuracyaltitudealtitudeAccuracyheadinglatitudelongitudespeed

其中一些依赖于不止一次的读取,例如 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 方法,它会在找到新位置时不断触发。参数相同,当你持续读取(例如在移动设备上)时,你将获得 headingspeed 的值。你可以使用 clearWatch 方法停止观察位置变化。

当你外出时,使用 watchPosition 非常酷。查看 地理定位演示页面,并使用底部的按钮打开和关闭观察位置。

本质上,这就是你手机上的地图应用程序所做的。

你能用它做什么?

嗯,你得到的是最终用户的纬度和经度。这可以与各种地理平台一起使用,例如 GeoNames,以便在你周围找到感兴趣的地方。

你也可以让人们在地图上为他们的朋友设置标记,与他们协作绘画,在你周围找到照片、推文或 Foursquare 签到 - 从纬度/经度开始,你可以做很多事情。

资源

我们很快就会举办关于地理定位的网络研讨会,敬请期待!

祝你编程愉快!

关于 Chris Heilmann

HTML5 和开放网络的布道者。让我们来修复它!

更多来自 Chris Heilmann 的文章…