你的位置:首页 > Java教程

[Java教程]HTML5 geolocation


测试demo的github地址: https://github.com/lily1010/html5_geolocation

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

 

一  基于浏览器的HTML5查找地理位置

html5中的GPS定位功能封装在 navigator.geolocation 属性里,有三种方法:

(1) getCurrentPosition 只获取一次用户的位置

(2) watchPosition 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

(3) clearWatch() - 停止 watchPosition() 方法

 

二 getCurrentPosition和 watchPosition方法使用格式是

getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)

(1)successCallback表示调用函数成功以后的回调函数,该函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。

(2)errorCallback表示返回的错误代码。它包含以下两个属性:

1、message:错误信息2、 code:错误代码。其中code错误代码包括以下四个值:
1 位置服务被拒绝
2 暂时获取不到位置信息
3 获取信息超时
4 未知错误

(3)positionOptions数据格式为JSON,有三个可选的属性:

1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

下面来看一下测试例子:(注意要开启定位后才可以看效果)
<!DOCTYPE html> <html> <head>   <meta charset="utf-8"/>   <title>基于浏览器的HTML5查找地理位置</title>   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  <script> var options={    enableHighAccuracy:true,  //高精度定位参数    maximumAge:1000  }  function getLocation(){    if(navigator.geolocation){      //浏览器支持geolocation      navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数      //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)           //navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航      //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)    }else{      //浏览器不支持geolocation      alert ('您的浏览器暂不支持定位');    }  }  //成功时  function onSuccess(position){   //返回用户位置   //经度   var longitude =position.coords.longitude;     //纬度   var latitude = position.coords.latitude;     //精确度   var accuracy = position.coords.accuracy;     //高度精确度   var altitudeAccuracy = position.coords.altitudeAccuracy;     //设备正北顺时针前进的方位   var heading = position.coords.heading;     //设备外部环境的移动速度(m/s)   var speed = position.coords.speed;     //当位置捕获到时的时间戳   var timestamp = position.timestamp;     document.getElementById("container").innerHTML= "您的经度是="+longitude+'<br>'   +"您的纬度是="+latitude+'<br>'+"您的精确度是="+accuracy+'<br>'   +"您的高度精确度是="+altitudeAccuracy+'<br>'+"您的设备正北顺时针前进的方位是="+heading+'<br>'   +"您的设备外部环境的移动速度(m/s)是="+speed+'<br>'+"您的当位置捕获到时的时间戳是="+timestamp+'<br>';  }  //失败时  function onError(error){   switch(error.code){    case 1:alert("位置服务被拒绝");break;    case 2:alert("暂时获取不到位置信息");break;    case 3:alert("获取信息超时");break;    case 4:alert("未知错误");break;   }  }  window.onload=getLocation;  </script></head><body>  <div id="container" style="300px;height: 300px"></div></body></html>

 上面代码最好用手机测试,因为谷歌浏览器因为被国内封的缘故,定位嘛,你们懂得

 

 

二 HTML5 geolocation调用百度地图api

百度地图的手册地址: http://developer.baidu.com/map/jsdemo-mobile.htm#i7_1

事先说明,html5不是精确定位,所以在地图上查看效果时总有几百米的误差

<!DOCTYPE html> <html> <head>   <meta charset="utf-8"/>   <title>基于浏览器的HTML5查找地理位置和调取百度地图api</title>   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  <!-- 百度API -->     <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  <script>  var options={    enableHighAccuracy:true,  //高精度定位参数    maximumAge:1000  }  function getLocation(){    if(navigator.geolocation){      //浏览器支持geolocation      navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数      //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)           //navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航      //onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)    }else{      //浏览器不支持geolocation      alert ('您的浏览器暂不支持定位');    }  }  //成功时  function onSuccess(position){   //返回用户位置   //经度   var longitude =position.coords.longitude;   //纬度   var latitude = position.coords.latitude;   //使用百度地图API   //创建地图实例    var map =new BMap.Map("container");   //创建一个坐标   var point =new BMap.Point(longitude,latitude);   //地图初始化,设置中心点坐标和地图级别    map.centerAndZoom(point,15);   map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点  }  //失败时  function onError(error){   switch(error.code){    case 1:alert("位置服务被拒绝");break;    case 2:alert("暂时获取不到位置信息");break;    case 3:alert("获取信息超时");break;    case 4:alert("未知错误");break;   }  }  window.onload=getLocation;  </script></head><body>  <div id="container" style="300px;height: 300px"></div></body></html>

 上面代码已经在手机上测试通过了,误差有点大,还是不适合精确定位,定位到城市还是不错的