基于HTML5的移动Web应用——Geolocation地理定位

转载于 2023-02-27 15:49:01 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://hnxmxit.com/index.php?g=home&m=article&a=show&id=339

文章标签：

#前端 #html5 #html

GeolocationAPI是用于获取设备地理位置的接口，通过经纬度进行定位。它在大部分PC和移动浏览器中得到良好支持。开发者可以使用navigator.geolocation对象的getCurrentPosition方法获取位置信息，包括经度、纬度、精度等，并在回调函数中处理这些数据。如果定位失败，会有相应的错误处理回调。

地理位置一般是用来描述地理事物的空间关系。通常情况下，用经纬度可以准确地描述地理位置。而通常所说的地理定位也是找到该地理位置的经纬度作为坐标来进行定位的。在PC端，通常使用IP来定位该IP用户的位置，移动端定位有多种方式，最准确的是GPS。在Web开发中，Geolocation API (地理位置应用程序接口)提供了准确知道浏览器用户当前位置的功能。本节将对Geolocation地理定位进行详细讲解。

Geolocation 简介

Geolocation API是通过获取地理位置的经纬度来进行定位的，它封装了获取位置的技术细节，开发者不用关心位置信息究竟从何而来，极大地简化了应用的开发难度。

Geolocation API已经得到大部分PC端的浏览器支持。移动Web浏览器也能很好地支持Geolocation API。PC端主流浏览器对Geolocation的支持情况如表所示。

表 PC 浏览器对Geolocation的支持

IE
Firefox
Safari
Chrome
Opera
IE9+
支持
支持
支持
支持

移动端Web浏览器对Geolocation的支持情况如表所示。

表移动端浏览器对Geolocation的支持

ios Safari
Android Browser
Opera Mobile
Opera Mini
BlackBerry Webkit
支持
支持
支持
不支持
支持

从上面两个表格可以看出Geolocation API的支持情况，随着技术的更新迭代，Geo-location API的支持情况会更加完善。

获取当前位置

Geolocation API的使用非常简单，navigator. geolocation 对象提供了可以公开访问地理位置的方法，其中navigator为浏览器内置对象。检测浏览器是否支持定位API，只需要CurrentPosition()被调用时会发起一个异步请求，浏览器会调用系统底层的硬件(如GPS)来更新当前的位置信息，当信息获取到之后会在回调函数中传入position对象。

position对象包含两个属性：一个是coords (坐标)，它是一个Coordiante对象，包含当前位置信息；另一个是timestamp,表示获取到位置的时间戳。

coordiante对象包含包括经纬度在内的一系列信息，具体如下:

(1) latitude: 一个十进制表示的纬度坐标。
(2) longitude: 一个十进制表示经度的坐标。
(3) altitude: 海拔高度(以米为单位，如果是5,表示精确到5 m范围)。
(4) accuracy: 当前经纬度信息的精度(以米为单位)。
(5) altitudeAccuracy: 当前海拔高度的精度。
(6) heading:代表当前设备的朝向，该值是以弧度为单位，指示了按顺时针方向相对于正北的度数(例如: heading 为270时表示正西方)。

下面通过一个案例来演示如何使用Geolocation API获取当前位置，代码如示例所示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getMyPosition(){
if(window.navigator.geolocation){
//获取当前位置..
alert("正在获取您的位置.");
//如果获取位置成功，会调用名字为successPosition 的方法.
navigator.geolocation.getCurrentPosition
(successPosition,errorPosition);
}else{
alert("您当前的浏览器不支持..");
}
}
function successPosition(position){
var jd=position.coords.longitude;//经度
var wd=position.coords.latitude; //纬度
alert(jd+","+wd);
}
//如果没有获取到位置，就会调用这个方法
function errorPosition(){
alert("获取位置失败.");
}
getMyPosition();
</script>
</head>
<body>
</body>
</html>