Chinaunix首页 | 论坛 | 博客
  • 博客访问: 72588
  • 博文数量: 59
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 600
  • 用 户 组: 普通用户
  • 注册时间: 2016-08-22 10:54
文章分类
文章存档

2016年(59)

我的朋友

分类: Html/Css

2016-10-24 10:01:07

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(18)——HTML5地理定位

在前面的《HTML5移动开发之路(2)——HTML5的新特性》中介绍了关于HTML5的地理定位功能,这一篇我们来详细了解一下怎么使用该功能。

HTML5 Geolocation API用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,在使用该功能的时候浏览器会弹出提醒框。

一、地理定位的几种方式

IP地址、GPS、Wifi、GSM/CDMA

二、地理位置获取流程

 

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。

3、假设用户允许,浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

 

三、浏览器的支持

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+ 支持地理定位。

注释:对于拥有 GPS 的设备,比如 iPhone(IPhone3.0+、Android2.0+),地理定位更加精确。

四、HTML5中地理位置定位的方法

 

GeolocationAPI存在于navigator对象中,只包含3个方法:

1、getCurrentPosition   //当前位置

2、watchPosition           //监视位置

3、clearWatch               //清除监视

五、地理定位方法getCurrentPosition()

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <body>  
  4.     <id="demo">点击这个按钮,获得您的坐标:p>  
  5.     <button onclick="getLocation()">试一下button>  
  6.     <script>  
  7.         var x=document.getElementById("demo");  
  8.         function getLocation(){  
  9.           if (navigator.geolocation){  //判断是否支持地理定位  
  10.               //如果支持,则运行getCurrentPosition()方法。  
  11.               navigator.geolocation.getCurrentPosition(showPosition);  
  12.           }else{  
  13.               //如果不支持,则向用户显示一段消息  
  14.               x.innerHTML="Geolocation is not supported by this browser.";  
  15.           }  
  16.         }  
  17.   
  18.         //获取经纬度并显示  
  19.         function showPosition(position){  
  20.             x.innerHTML="Latitude: " + position.coords.latitude +   
  21.             "<br />Longitude: " + position.coords.longitude;    
  22.         }  
  23.     script>  
  24. body>  
  25. html>  

 

getCurrentPosition(success,error,option)方法最多可以有三个参数:

getCurrentPosition()方法第一个参数回调一个showPosition()函数并将位置信息传递给该函数,从该函数中获取位置信息并显示,

getCurrentPostion()方法第二个参数用于处理错误信息,它是获取位置信息失败的回调函数

getCurrentPostion()方法第三个参数是配置项,该参数是一个对象,影响了获取位置的细节。

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <body>  
  4.     <id="demo">点击这个按钮,获得您的坐标:p>  
  5.     <button onclick="getLocation()">试一下button>  
  6.     <script>  
  7.         var x=document.getElementById("demo");  
  8.         function getLocation(){  
  9.           if (navigator.geolocation){  //判断是否支持地理定位  
  10.               //如果支持,则运行getCurrentPosition()方法。  
  11.               navigator.geolocation.getCurrentPosition(showPosition,showError);  
  12.           }else{  
  13.               //如果不支持,则向用户显示一段消息  
  14.               x.innerHTML="Geolocation is not supported by this browser.";  
  15.           }  
  16.         }  
  17.   
  18.         //获取经纬度并显示  
  19.         function showPosition(position){  
  20.             x.innerHTML="Latitude: " + position.coords.latitude +   
  21.             "<br />Longitude: " + position.coords.longitude;    
  22.         }  
  23.   
  24.         //错误处理函数  
  25.         function showError(error){  
  26.           switch(error.code)  //错误码   
  27.             {  
  28.             case error.PERMISSION_DENIED:  //用户拒绝  
  29.               x.innerHTML="User denied the request for Geolocation."  
  30.               break;  
  31.             case error.POSITION_UNAVAILABLE:  //无法提供定位服务  
  32.               x.innerHTML="Location information is unavailable."  
  33.               break;  
  34.             case error.TIMEOUT:  //连接超时  
  35.               x.innerHTML="The request to get user location timed out."  
  36.               break;  
  37.             case error.UNKNOWN_ERROR:  //未知错误  
  38.               x.innerHTML="An unknown error occurred."  
  39.               break;  
  40.             }  
  41.          }  
  42.     script>  
  43. body>  
  44. html>  

 

六、在Google地图中显示结果

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <body>  
  4.     <id="demo">点击这个按钮,获得您的位置:p>  
  5.     <button onclick="getLocation()">试一下button>  
  6.     <div id="mapholder">div>  
  7.         <script src="">script>  
  8.         <script>  
  9.             var x=document.getElementById("demo");  
  10.                 function getLocation(){  
  11.                    if (navigator.geolocation){  
  12.                      navigator.geolocation.getCurrentPosition(showPosition,showError);  
  13.                     }else{  
  14.                         x.innerHTML="Geolocation is not supported by this browser.";  
  15.                     }  
  16.                 }  
  17.   
  18.                 function showPosition(position){  
  19.                       lat=position.coords.latitude;  
  20.                       lon=position.coords.longitude;  
  21.                       latlon=new google.maps.LatLng(lat, lon)  
  22.                       mapholder=document.getElementById('mapholder')  
  23.                       mapholder.style.height='250px';  
  24.                       mapholder.style.width='500px';  
  25.   
  26.                       var myOptions={  
  27.                           center:latlon,zoom:14,  
  28.                           mapTypeId:google.maps.MapTypeId.ROADMAP,  
  29.                           mapTypeControl:false,  
  30.                           navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  
  31.                       };  
  32.                       var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);  
  33.                       var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});  
  34.                  }  
  35.   
  36.                 function showError(error){  
  37.                       switch(error.code){  
  38.                         case error.PERMISSION_DENIED:  
  39.                           x.innerHTML="User denied the request for Geolocation."  
  40.                           break;  
  41.                         case error.POSITION_UNAVAILABLE:  
  42.                           x.innerHTML="Location information is unavailable."  
  43.                           break;  
  44.                         case error.TIMEOUT:  
  45.                           x.innerHTML="The request to get user location timed out."  
  46.                           break;  
  47.                         case error.UNKNOWN_ERROR:  
  48.                           x.innerHTML="An unknown error occurred."  
  49.                           break;  
  50.                         }  
  51.                 }  
  52.         script>  
  53. body>  
  54. html>  

 

 

七、在百度地图中显示结果

1、去百度开发者获取地图显示密钥

http://developer.baidu.com/map/jshome.htm

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <body>  
  4.     <id="demo">点击这个按钮,获得您的位置:p>  
  5.     <button onclick="getLocation()">试一下button>  
  6.     <div id="mapholder" style="width:600px;height:500px;">div>  
  7.         <script type="text/javascript" src="你自己的密钥">script>  
  8.         <script>  
  9.             var x=document.getElementById("demo");  
  10.                 function getLocation(){  
  11.                    if (navigator.geolocation){  
  12.                      navigator.geolocation.getCurrentPosition(showPosition,showError);  
  13.                     }else{  
  14.                         x.innerHTML="Geolocation is not supported by this browser.";  
  15.                     }  
  16.                 }  
  17.   
  18.                 function showPosition(position){  
  19.                     //alert(position.coords.longitude + " ___ " + position.coords.latitude);  
  20.                        
  21.                     // 百度地图API功能  
  22.                     var map = new BMap.Map("mapholder");            // 创建Map实例  
  23.                     var point = new BMap.Point(position.coords.longitude, position.coords.latitude);    // 创建点坐标  
  24.                     map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。  
  25.                     map.enableScrollWheelZoom();   
  26.                  }  
  27.   
  28.                 function showError(error){  
  29.                       switch(error.code){  
  30.                         case error.PERMISSION_DENIED:  
  31.                           x.innerHTML="User denied the request for Geolocation."  
  32.                           break;  
  33.                         case error.POSITION_UNAVAILABLE:  
  34.                           x.innerHTML="Location information is unavailable."  
  35.                           break;  
  36.                         case error.TIMEOUT:  
  37.                           x.innerHTML="The request to get user location timed out."  
  38.                           break;  
  39.                         case error.UNKNOWN_ERROR:  
  40.                           x.innerHTML="An unknown error occurred."  
  41.                           break;  
  42.                         }  
  43.                 }  
  44.         script>  
  45. body>  
  46. html>  

注意:如果拷贝上面代码,请将“你自己的密钥”替换为在百度开发者中心申请的密钥

 

可以看到Google Map 和百度地图的定位参考不同,所以用ip定位误差很大。

八、getCurrentPosition()方法—返回数据

 

若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。

 

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间

 

还可以获得地理位置(只有firefox支持)

 

p.address.country   国家

p.address.region    省份

p.address.city          城市

九、监视位置(移动设备中)

 

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

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法

watchPosition像一个追踪器与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

varwatchPositionId =navigator.geolocation.watchPosition(success_callback,error_callback,options);

navigator.geolocation.clearWatch(watchPositionId );

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <body>  
  4. <id="demo">点击这个按钮,获得您的坐标:p>  
  5. <button onclick="getLocation()">试一下button>  
  6. <script>  
  7. var x=document.getElementById("demo");  
  8. function getLocation()  
  9.   {  
  10.   if (navigator.geolocation)  
  11.     {  
  12.     navigator.geolocation.watchPosition(showPosition);  
  13.     }  
  14.   else{x.innerHTML="Geolocation is not supported by this browser.";}  
  15.   }  
  16. function showPosition(position)  
  17.   {  
  18.   x.innerHTML="Latitude: " + position.coords.latitude +   
  19.   "<br />Longitude: " + position.coords.longitude;      
  20.   }  
  21. script>  
  22. body>  
  23. html>  
阅读(519) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~