最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

html5之使用地理定位的代码分享

来源:动视网 责编:小采 时间:2020-11-27 15:11:36
文档

html5之使用地理定位的代码分享

html5之使用地理定位的代码分享:1)使用地理定位: 通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象; 1.1)Geolocation对象成员: getCurrentPosition(callback,errorCallback,options)——获取当前位置; watchPosition(callback
推荐度:
导读html5之使用地理定位的代码分享:1)使用地理定位: 通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象; 1.1)Geolocation对象成员: getCurrentPosition(callback,errorCallback,options)——获取当前位置; watchPosition(callback


1)使用地理定位:

通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象;

1.1)Geolocation对象成员:

getCurrentPosition(callback,errorCallback,options)——获取当前位置;

watchPosition(callback,error,options)——开始监控当前位置;

clearWatch(id)——停止监控当前位置;

1.1.1)浏览器调用getCurrentPosition的callback函数的参数时,会传入一个提供位置详情的position对象;

position对象成员:

coords——返回当前位置的坐标,即Coordinates对象;

timestamp——返回获取坐标信息的时间;

Coordinates对象成员:

latitude——返回用十进制表示的纬度;

longitude——返回用十进制表示的经度;

altitude——返回用米表示的海拔高度;

accuracy——返回用米表示的坐标精度;

altitudeAccuracy——返回用米表示的海拔精度;

heading——返回用度表示的行进方向;

speed——返回用米/秒表示的行进速度;

2)处理地理定位错误:

getCurrentPosition(callback,errorCallback,options)方法的第二个参数,它让我们可以指定一个函数,在获 取位置发生错误时调用它。此函数会获得一个PositionError对象;

PositionError对象成员:

code——返回代表错误类型的代码;

=1——用户未授权使用地理定位功能;

=2——不能确定位置;

=3——请求位置的尝试已超时;

message——返回描述错误的字符串;

3)指定地理定位选项:

getCurrentPosition(callback,errorCallback,options)方法提供的第三个参数是一个PositionOptions对象。

PositionOptions对象的成员:

enableHighAccuracy——告诉浏览器我们希望得到可能的最佳结果;

timeout——限制请求位置的事件,设置多少毫秒后会报告一个超时错误;

maximumAge——告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数;

4)监控位置:

watchPosition方法不断获得关于位置的更新。所需参数与getCurrentPosition方法相同,工作方式也一样。

区别在于:随着位置发生改变,回调函数会被反复地调用。

 table{
 border-collapse: collapse;
 }
 th,td{
 padding: 4px;
 }
 th{
 text-align: right;
 }
 <table border="1">
 <tr>
 <th>经度:</th><td id="longitude">-</td>
 <th>纬度:</th><td id="latitude">-</td>
 </tr>
 <tr>
 <th>海拔高度:</th><td id="altitude">-</td>
 <th>坐标精度:</th><td id="accuracy">-</td>
 </tr>
 <tr>
 <th>海拔精度:</th><td id="altitudeAccuracy">-</td>
 <th>行进方向:</th><td id="heading">-</td>
 </tr>
 <tr>
 <th>速度:</th><td id="speed">-</td>
 <th>时间:</th><td id="timestamp">-</td>
 </tr>
 <tr>
 <th>错误类型:</th><td id="errcode">-</td>
 <th>错误信息</th><td id="errormessage">-</td>
 </tr>
 </table><pre name="code" class="html"> <button id="pressme">Cancel Watch</button>
 var options={
 enableHighAccuracy:false,
 timeout:2000,
 maximumAge:30000
 }
 var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options)
 document.getElementById("pressme").onclick=function(e){
 navigator.geolocation.clearWatch(WatchID);
 }
 function displayPosition(pos){
 var properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"];
 for(var i=0;i<properties.length;i++){
 var value=pos.coords[properties[i]];
 document.getElementById(properties[i]).innerHTML=value;
 }
 document.getElementById("timestamp").innerHTML=pos.timestamp;
 }
 function handleError(err){
 document.getElementById("errcode").innerHTML=err.code;
 document.getElementById("errmessage").innerHTML=err.message;
 }

文档

html5之使用地理定位的代码分享

html5之使用地理定位的代码分享:1)使用地理定位: 通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象; 1.1)Geolocation对象成员: getCurrentPosition(callback,errorCallback,options)——获取当前位置; watchPosition(callback
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top