HTML5的Geolocation地理位置定位API使用教程

2020-04-21 23:17:01易采站长站整理

在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地的路线,可以说位置信息对于移动应用是不可或缺的。
为了顺应这个潮流,HTML5为我们提供了Geolocation库,有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。

基本用法 
首先,我们可以从浏览器的navigator对象中通过geolocation属性获取到一个Geolocation的实例,如下图所示:
2016512112246957.jpg (856×560)

图中我们可以看到,Geolocation类有三个常用的方法,他们分别是:

1.getCurrentPosition: 用于获取当前的位置信息
2.watchPosition: 用于在位置变化时实时监测位置信息
3.clearWatch: 取消正在运行的监测操作
我们先来看一下getCurrentPosition方法,下面是它的函数签名:

JavaScript Code复制内容到剪贴板

navigator.geolocation.getCurrentPosition(success[, error[, options]]);  

第一个参数用于指定一个成功后的处理函数,第二参数用于指定一个错误处理函数,第三个用于给函数提供一些可选的配置项。现在我们就来调用这个函数:

JavaScript Code复制内容到剪贴板

navigator.geolocation.getCurrentPosition(function(position) {   
    //success handler code goes here   
    console.log(position);   
}, function(error) {   
    //error handler code goes here   
    console.log(error);   
}, {//options   
    enableHighAccuracy: true,   
    timeout: 5000,   
    maximumAge: 0   
});  

一旦这段代码运行起来,浏览器窗口就会弹出一个确认框,请求用户进行位置定位的授权:
2016512112330667.jpg (848×464)

如果我们点击Allow允许该站点进行位置定位,该函数就开始从设备获取位置信息,并触发成功的回调函数,并将位置信息对象传入回调函数中,上面的代码中我们在控制台打印了position,控制台信息如下:
2016512112354420.png (914×502)