HTML5 地理位置定位(Geolocation)原理及应用
代码实现：
1.核心对象
①Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。
②要用该功能首先判断浏览器是否支持navigator.geolocation该对象。
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) 获取信息成功的回调函数
①当成功获得信息的时候，会自动调用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>
转载于:https://www.cnblogs.com/blesstian/p/6488923.html
相关资源：垃圾分类数据集及代码