html5-地理位置定位 API 接口开发

silencexiao

2013-01-16

关注关注

转载自【http://www.656463.com/article/336】

HTML5地理位置定位API接口开发包括：地理位置定位原理与介绍和HTML5中地理位置定位的方法，最后获取经纬度显示当前位置在百度地图上

地理位置定位原理与介绍

地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA

地理位置获取流程：

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

HTML5地理地位的实现：

1.实现基于浏览器（无需后端支持）获取用户的地理位置技术

2.精确定位用户的地理位置(精度最高达10m之内，依赖设备)

3.持续追踪用户的地理位置

4.与GoogleMap、或者BaiduMap交互呈现位置信息。

HTML5中地理位置定位的方法

关于Geolocation对象

GeolocationAPI用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or“拒绝”。

先看看哪些浏览器支持GeolocationAPI：

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+

GeolocationAPI存在于navigator对象中，只包含3个方法：

1、getCurrentPosition//当前位置

2、watchPosition//监视位置

3、clearWatch//清除监视

getCurrentPosition(success,error,option)方法最多可以有三个参数：

第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；

第二个参数用于捕获获取位置信息出错的情况，

第三个参数是配置项。

navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){ 
        case error.TIMEOUT : 
            alert( " 连接超时，请重试 " ); 
            break; 
        case error.PERMISSION_DENIED : 
            alert( " 您拒绝了使用位置共享服务，查询已取消 " ); 
            break; 
        case error.POSITION_UNAVAILABLE :  
            alert( " ，抱歉，暂时无法为您所在的星球提供位置服务 " ); 
            break; 
    } 
});

navigator.geolocation.getCurrentPosition( … , … , option);
  
option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。
 enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。 
    timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数

watchPosition像一个追踪器与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

varwatchPositionId=navigator.geolocation

.watchPosition(success_callback,

error_callback,options);

navigator.geolocation.clearWatch(watchPositionId);

利用HTML5和百度地图API实现地理定位

完整源码：

<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5 地理位置定位 API 接口开发</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?key=&v1=1.1&services=true">
</script>
</head>
  
<body>
<div style="width:697px;height:550px;border: #ccc solid 1px;"
id="mapContent"></div>
  
<script type="text/javascript">
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(
        function(p){
            var latitude = p.coords.latitude;
            var longitude = p.coords.longitude;
            createMap(latitude,longitude);
        },
        function(e){
            var msg = e.code+"\n"+e.message;
        }
    );
}else{
    alert("不支持");
}
  
function createMap(a,b){
    var map = new BMap.Map("mapContent");
    var point = new BMap.Point(b,a);
    map.centerAndZoom(point,20);
    window.map=map;
}
</script>
</body>
</html>

在电脑上显示的地理位置不是很准确

html5 用户接口 api接口