地理位置获取流程:
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
HTML5地理地位的实现: 1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。
HTML5中地理位置定位的方法
Geolocation API存在于navigator对象中,只包含3个方法:
1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
getCurrentPosition(success,error,option)方法最多可以有三个参数:
第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数;
第二个参数用于捕获获取位置信息出错的情况,
第三个参数是配置项。
******************************************获取自己当前的位置
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>H5地理位置Demo</title> <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"> </script> </head><body> <div id="aaa" style="border:#ccc solid 1px" width:"697px" height:"500px"></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 aa = e.code + "\n" + e.message; alert(aa); } ); } function createmap(a,b) { var map = new BMap.Map("aaa"); var point = new BMap.Point(b, a); map.centerAndZoom(point, 20);//设置地图的中心点和坐标 Window.map = map;//将map变量存储在全局 } </script></body></html>