地理位置定位

来源：互联网发布：基金收益算法编辑：程序博客网时间：2024/04/29 18:05

基于百度地图的HTML5地理位置定位实例

关于HTML 5部分，最后要介绍的是如何使用Geolocation API来获得用户的地理位置信息。如果浏览器支持，且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。该Geolocation API可以应用于移动设备中的地理定位。

学习内容：

★ 掌握Geolocation API的基本知识，掌握geolocation属性的三个方法。

★ 掌握position对象存在哪些属性，能够使用getCurrentPosition方法来取得存放在position对象内的当前用户的地理位置信息。

★ 掌握在页面上使用Google地图的基本方法，能够在页面上正确显示google地图，并且把用户当前所在的地理位置在地图上正确标注出来。

在HTML 5中，为window.navigator对象新增了一个geolocation属性，可以使用Geolocation API来对该属性进行访问。window.navigator对象的geolocation属性存在以下三个方法。

一、取得当前地理位置

可以使用getCurrentPosition方法来取得用户当前的地理位置信息，该方法的定义如下所示。

折叠展开XML/HTML 代码复制内容到剪贴板

void getCurrentPosition(onSuccess, onError, options);

其中第一个参数为获取当前地理位置信息成功时所执行的回调函数，第二个参数为获取当前地理位置信息失败时所执行的回调函数，第三个参数为一些可选属性的列表。其中，第二、三个参数为可选属性。

getCurrentPosition方法中的第一个参数为获取当前地理位置信息成功时所执行的回调函数。该参数的使用方法如下所示。

折叠展开JavaScript 代码复制内容到剪贴板

navigator.geolocation.getCurrentPosition(function(position){
//获取成功时的处理
}

在获取地理位置信息成功时执行的回调函数中，用到了一个参数position，它代表一个position对象，我们将在第11.2节中对这个对象进行具体介绍。

getCurrentPosition方法中的第二个参数为获取当前地理位置信息失败时所执行的回调函数。如果获取地理位置信息失败，你可以通过该回调函数把错误信息提示给用户。当在浏览器中打开使用了Geolocation API来获得用户当前位置信息的页面时，浏览器会询问用户是否共享位置信息，如图1所示。

图1 浏览器询问用户是否共享位置信息（在Opera 11浏览器中）

如果你在该画面中拒绝共享的话，也会引起错误的发生。

该回调函数使用一个error对象作为参数，该对象具有以下两个属性：

★ code属性

code属性为以下三个值其中之一：

用户拒绝了位置服务（属性值为1）。

获取不到位置信息（属性值为2）。

获取信息超时错误（属性值为3）。WANGYEXX.COM

★ message属性

message属性为一个字符串，在该字符串中包含了错误信息，这个错误信息在开发和调试时将很有用。有些浏览器中不支持message属性，譬如Firefox 3.6以上。

在getCurrentPosition方法中使用第二个参数来捕获错误信息的具体使用方法如下所示。

折叠展开JavaScript 代码复制内容到剪贴板

navigator.geolocation.getCurrentPosition (
function(position) {
var coords = position.coords;
showMap(coords.latitude, coords.longitude, coords.accuracy);
},
//捕获错误信息
function(error) {
var errorTypes = {
1：'位置服务被拒绝',
2：'获取不到位置信息',
3：'获取信息超时'
};
alert(errorTypes[error.code] + "：，不能确定你的当前地理位置");
}
);

getCurrcntPosition方法中的第三个参数可以省略，它是一些可选属性的列表，这些可选属性如下。

★ enableHighAccuracy

是否要求高精度的地理位置信息，这个参数在很多设备上设置了都没用，因为使用在设备上时需要结合设备电量、具体地理情况来综合考虑。因此，多数情况下把该属性设为默认，由设备自身来调整。

★ timeout

对地理位置信息的获取操作做一个超时限制（单位为毫秒）。如果在该时间内未获取到地理位置信息，则返回错误。

★ maximumAge

对地理位置信息进行缓存的有效时间（单位为毫秒）。例如maximumAge：120000（1分钟是60000）。如果10点整的时候获取过一次地理位置信息，10：01的时候，再次调用navigator.geolocation.getCurrentPosition重新获取地理位置信息，则返回的依然为10: 00时的数据（因为设置的缓存有效时间为2分钟）。超过这个时间后缓存的地理位置信息被废弃，尝试重新获取地理位置信息。如果该值被指定为0，则无条件重新获取新的地理位置信息。

对于这些可选属性的具体设置方法如下所示。

折叠展开JavaScript 代码复制内容到剪贴板

navigator.geolocation.getCurrentPosition (
functionI(position) {
//获取地理位置信患成功时所做处理
},
function (error) {
//获取地理位置信息失败时所傲处理
},
//以下为可选属性
{
//设置缓存有效时问为2分钟
maximumAge: 60*1000*2,
//5秒钟内未获取到地理位置信息则返回错误
timeout: 5000
}
);

二、持续监视当前地理位置的信息

使用watchPosition方法来持续获取用户的当前地理位置信息，它会定期地自动获取，该方法定义如下所示。

折叠展开JavaScript 代码复制内容到剪贴板

int watchCurrentPosition(onSuccess, onError, options);

该方法三个参数的说明与使用方法与getCurrentPosition方法的参数说明与使用方法相同。该方法返回一个数字，这个数字的使用方法与JavaScript脚本中setInterval方法的返回参数的使用方法类似，可以被clearWatch方法使用，停止对当前地理位置信息的监视。

三、停止获取当前用户的地理位置信息

使用该方法可以停止对当前用户的地理位置信息的监视。该方法定义如下所示。

折叠展开JavaScript 代码复制内容到剪贴板

void clearWatch(watchId);

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script><script type="text/javascript">function getLocation() { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000}); //第一个参数是操作成功时候执行的  //第二个参数是失败的时候执行的 //第三个参数 可以用来设置一些属性  }else{ alert("您的浏览器不支持使用HTML 5来获取地理位置服务"); } } function showMap(value) { var longitude = value.coords.longitude;//当前地理位置的精度 var latitude = value.coords.latitude;//当前地理位置的纬度  var map = new BMap.Map("map");//新建一张空白地图 var point = new BMap.Point(longitude, latitude);    // 以当前位置为中心创建点坐标 map.centerAndZoom(point, 15);var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注 map.addOverlay(marker);              // 将标注添加到地图中 } function handleError(value) { switch(value.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } }</script>

<div id="map" style="width:1000px;height:200px; background-color:#FFF"></div><button id="show_location" onClick="getGeoLocation()">谷歌显示地理位置</button>

这个示例在opera中测试成功 。。。。。。。。