HTML5 地理位置定位(Geolocation)原理及应用

时间 2019-11-12

标签 html5 html 地理位置定位 geolocation 原理应用栏目 HTML5 繁體版

原文原文链接

HTML5 地理位置定位(Geolocation)原理及应用javascript

代码实现：html

1.核心对象java

①Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。git

②要用该功能首先判断浏览器是否支持navigator.geolocation该对象。api

if(navigator.geolocation){
　　navigator.geolocation.getCurrentPosition(success,error,options)
}else{
　　alert("您的浏览器out了");
}浏览器

2.Geolocation对象详解缓存

①getCurrentPosition(success,error,options)该方法是实现地理定位的核心方法，该方法可以对获取到的信息做出处理以及设置。网络

A.success(position) 获取信息成功的回调函数
B.error(errorcode)获取信息失败的回调函数
C.options获取信息前能够按照你的需求来设置一些参数函数

success(position) 获取信息成功的回调函数ui

①当成功得到信息的时候，会自动调用success函数，而这个函数会自动生成一个包含返回地理信息的position对象，以下：

A.coords.latitude（纬度）
B.coords.longitude（经度）
C.coords.altitude（海拔）
D.coords.accuracy（位置精确度）
E.coords.altitudeAccuracy(海拔精确度)
F.coords.heading（朝向）
G.coords.speed (速度)
H.timestamp(响应的日期/时间)

error(errorcode)获取信息失败的回调函数

A. 地理信息会由于各类因素，例如信号很差等等而出错。所以当获取信息失败的时候会自动调用getCurrentPosition的第二个参数，即error函数，这个函数会自动生成一个包含错误代码和错误信息的对象做为其参数，code是错误代码，message是错误信息。

switch(errorcode.code){
case 1 :
alert(errorcode.message);//用户选了不容许
break;
case 2:
alert(errorcode.message);/连不上GPS卫星，或者网络断了
break;
case 3:
alert(errorcode.message);//超时了
break;
default:
alert(errorcode.message);//未知错误，实际上是err.code==0的时候
break;
}

options 设置一些参数

①options是一个对象，能够设置超时时间、缓存时间等，以下：

A.enableHighAccuracy 表示是否容许使用高精度，但这个参数在不少设备上设置了都没用，设备综合考虑电量、地理状况等，不少时候都是默认的由设备自身来调整。

B.timeout 指定超时时间

C.maximumAge 是指缓存的时间

此外 geolocation 还有两个方法：

1.watchPosition(success,error,options) 表示重复获取地理位置，至关于将getCurrentPosition这个方法利用setinterval不断执行，其余用法和参数使用同样。2.clearWatch()用来清除前一次获取的位置信息。这个两个方法配合使用，可以实现一些很棒的功能，好比说：导航等！

<!DOCTYPE HTML><html> <head> <style> #map{ width:1000px;height:1000px; } </style> </head> <body> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6KQ6n1wazptsgrv2VWGDfvCbfkHuiCcO"></script> <script> function success (position) { var la=position.coords.latitude; var lo=position.coords.longitude; var map = new BMap.Map("map"); // 建立Map实例 map.centerAndZoom(new BMap.Point(lo,la), 15); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的 var local = new BMap.LocalSearch(map, { renderOptions: {map: map, panel: "r-result"} }); local.search("学校") } function error (errorCode) { alert(errorCode.code+"--"+errorCode.message); } var options={}; if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(success,error,options) }else{ alert("您的浏览器out了"); } </script> <div id="map"> </div> </body></html>