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

最新推荐文章于 2024-05-19 22:05:56 发布

empty007

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量253

点赞数

分类专栏： web前端文章标签： html5 map

本文链接：https://blog.csdn.net/empty007/article/details/84382261

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

转载自【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. 与 Google Map、或者 BaiduMap 交互呈现位置信息。

HTML5中地理位置定位的方法

关于 Geolocation对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”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)方法最多可以有三个参数：
第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；
第二个参数用于捕获获取位置信息出错的情况，
第三个参数是配置项。

[img]http://pic.yupoo.com/naxsu_v/CyP7Zlc1/QmHmy.gif[/img]


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的工作方式。
var watchPositionId = 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>