silencexiao 2013-01-16
转载自【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.与GoogleMap、或者BaiduMap交互呈现位置信息。
HTML5中地理位置定位的方法
关于Geolocation对象
GeolocationAPI用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许”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)方法最多可以有三个参数:
第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数;
第二个参数用于捕获获取位置信息出错的情况,
第三个参数是配置项。
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的工作方式。
varwatchPositionId=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>
在电脑上显示的地理位置不是很准确
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q