地理位置一般是用来描述地理事物的空间关系。通常情况下，用经纬度可以准确地描述地理位置。而通常所说的地理定位也是找到该地理位置的经纬度作为坐标来进行定位的。在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>

<head>

<title>Title</title>

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>

因为Geolocation获取当前定位除了浏览器的支持，还需要硬件设备的支持，上述代码在不支持该操作的设备上的运行。

以上内容演示了Geolocation获取当前位置的过程，该案例获取的是当前位置的地理坐标，所以位置变化会导致坐标变化。

多学一招：监视移动设备的位置变化

下面介绍一个名词LBS (Location Based Service,基于位置的服务)，它是通过电信移动运营商的无线电通信网络(如GSM网、CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标，或大地坐标)。

在正文中演示的getCurrentPosition()方法只在调用时会得到位置信息，在LBS应用中，检测用户位置变化是非常常见的需求。一个做法是通过循环调用的方式去检测位置变化。

例如，设置了一个10s作为获取位置的间隔，这样做的缺点是:编程人员无法知道用户当前的速度。如果在飞机高铁上，10s 可能已经走了很长一段距离，这样提供给用户的位置信息可能是延迟的，如果将间隔设置得很短，又会非常耗电、耗能，如果用户长时间没动，这些查询都是无用的。

为了解决这个问题，Gcolocation 还提供了watchPosition()方法，可以让系统通知编程人员用户的位置发生了变化。

watchPosition0方法和getCurrentPosition()方法在调用上类似，但方法功能与getCurrentPosition() 的区别是非常明显的。调用该函数时会返回一个watchID，这个ID和setnterval()函数返回的ID类似，可以用于清除此次的监视操作。

watchPosition()方法也接受相同的3个参数：success.error回调，以及一个PositionOptions对象。

调用百度地图

前面介绍了Geolocation API的基本内容，Geolocation API更大的价值在于与GIS (地理信息系统)的结合。要想实现与GIS的结合首先需要一个地图的数据库，百度地图提供了地图、导航、街景等丰富的地图数据库，可以为用户所用。

下面通过一个案例来演示如何调用百度2D地图。

<!DOCTYPE html>

<html>

<head>

user-scalable=no">

<title>Geolocation</title>

html {height: 100%;}

body {height: 100%;margin: 0px; padding: 0px; }

#container {height:100%;}

</style>

</head>

<body>

if(navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var latitude = position.coords.latitude; // 纬度

var longitude =position.coords.longitude; // 经度

/********************/

// container表示注入哪个容器

var map = new BMap.Map("container");

// 把经度纬度传给百度

var point = new BMap.Point(longitude, latitude);

map.centerAndZoom(point, 15);

/****************************/

// 只写上面三行就可出现地图了，并且会定位

// 定义好了一个图片标记

var myIcon =new BMap.Icon(

"http://developer.baidu.com/map/jsdemo/img/fox.gif",

new BMap.Size(300, 157));

// 创建标注

var marker = new BMap.Marker(point, {icon: myIcon});

map.addOverlay(marker);

});

}

</script>

</body>

</html>

由于IE浏览器对百度API的支持情况较好，用IE浏览器访问该页面就会成功调用百度地图。

在示例中，首先在第17行代码中引入百度JavaScript版API。第21~22行代码获取当前位置坐标。第27行代码将坐标值传给百度地图。为了更明显地显示当前位置，在代码第27~28行定义一个标记，并在第32~34行将标记定位在百度地图的当前坐标上。需要注意的是，由于在实际开发中经度、纬度的值都会加密，所以运行结果中显示的位置可能与实际位置有偏差，不是错误。

调用完2D地图后，看一下百度的全景图。为了可以在普通PC上演示该功能，在调用全景图这个案例中，使用固定经纬度来模拟获取当前位置。

下面通过一个案例来演示如何使用Geolocation API来调用百度地图的全景图。

<!DOCTYPE html>

<html>

<head>

src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7">

</script>

body, html{

width: 100%;

height: 100%;

overflow: hidden;

margin:0;

font-family:"微软雅黑";

}

#panorama {

height: 100%;

width: 100%;

overflow: hidden;

}

</style>

</head>

<body>

var jd="116.349902";

var wd="40.065817";

//全景图展示

var panorama = new BMap.Panorama('panorama');

panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图

panorama.setPov({heading: -40, pitch: 6});

//全景图位置改变后，普通地图中心点也随之改变

panorama.addEventListener('position_changed', function(e){

var pos = panorama.getPosition();

map.setCenter(new BMap.Point(pos.lng, pos.lat));

marker.setPosition(pos);

});

</script>

</body>

</html>

用浏览器打开示例，在示例中，在30、31行代码指定经纬度。第37~40行为全景图展示代码，该段代码为固定写法，读者只需替换经纬度即可。Mac 机读者可以尝试获取当前位置再进行全景图调用。

ITPub博客

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

最新文章