zoukankan      html  css  js  c++  java

  • 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自：http://blog.csdn.net/dawanganban/article/details/18192091

    在前面的《小强的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()

    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4.     <p 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()方法第三个参数是配置项，该参数是一个对象，影响了获取位置的细节。

    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4.     <p 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地图中显示结果

    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4.     <p id="demo">点击这个按钮，获得您的位置：</p>  
    5.     <button onclick="getLocation()">试一下</button>  
    6.     <div id="mapholder"></div>  
    7.         <script src="http://maps.google.com/maps/api/js?sensor=false"></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


    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4.     <p id="demo">点击这个按钮，获得您的位置：</p>  
    5.     <button onclick="getLocation()">试一下</button>  
    6.     <div id="mapholder" style="600px;height:500px;"></div>  
    7.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></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 );

    1. <!DOCTYPE html>  
    2. <html>  
    3. <body>  
    4. <p 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>  
  • 相关阅读:
    Jenkins以root用户运行的方法
    nginx进行反向代理，80端口使用
    centos7 开机启动服务链接说明
    开始写博客
    python 读取文件夹，目录中出现中文的问题
    python unrar 解压缩
    python远程下载
    kryo 序列化
    python 多线程实验
    python decorator模式
  • 原文地址：https://www.cnblogs.com/wanghang/p/6298963.html
Copyright © 2011-2022 走看看