zoukankan      html  css  js  c++  java

  • [Andriod]移动Web应用程序开发HTML5篇 (五) 地理位置API

    1. 地理位置API介绍

     

    地位位置(Geolocation) API是HTML5引入的一个非常诱人的API，它在移动web应用的开发中非常有价值。只需要几行很简单的代码即可实现获取用户的地位位置。目前浏览器对其支持情况如下图：

     

     

    HTML5的地理位置API依次通过以下几个方式获取位置信息：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位置。如下图所示，优先级为逆时钟方向。

     

     

    2. 使用地理位置API

     

    地位位置(Geolocation) API使用非常方便，一个典型的判断浏览器是否支持HTML5 Geolocation API的函数：

     

    01 function updateLocation(position) {
    02  
    03     var latitude = position.coords.latitude;
    04  
    05     var longitude = position.coords.longitude;
    06  
    07  
    08     if (!latitude || !longitude) {
    09  
    10         document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
    11  
    12         return;
    13  
    14     }
    15  
    16  
    17     document.getElementById("latitude").innerHTML = latitude;
    18  
    19     document.getElementById("longitude").innerHTML = longitude;
    20  
    21 }
    在这段代码中，使用
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    这两个变量来保存经度和纬度，并将其返回给HTML代码，本例的其余代码如下所示：
    01 <!DOCTYPE html>
    02  
    03 <head>
    04  
    05     <meta charset="utf-8">
    06  
    07     <title>HTML5 Geolocation</title>
    08  
    09     <link rel="stylesheet" href="styles.css">
    10  
    11 </head>
    12  
    13  
    14 <body onload="loadDemo()">
    15  
    16  
    17 <h1>HTML5 Geolocation Example</h1>
    18  
    19  
    20 <span class="info">
    21  
    22   <p id="status">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p>
    23  
    24 </span>
    25  
    26  
    27 <h2>Current Position:</h2>
    28  
    29 <table border="1">
    30  
    31           <tr>
    32  
    33             <th width="40" scope="col"><h5 align="left">Lat.</h5></th>
    34  
    35              <td width="114" id="latitude">?</td>
    36  
    37           </tr>
    38  
    39           <tr>
    40  
    41             <td><h5>Long.</h5></td>
    42  
    43             <td id="longitude">?</td>
    44  
    45           </tr>
    46  
    47           <tr>
    48  
    49             <td><h5>Time</h5></td>
    50  
    51             <td id="longitude2">11:00:00 a.m.</td>
    52  
    53           </tr>
    54  
    55 </table>
    56  
    57  
    58 <p align="center" class="style2">Copyright (c) 2010</p>
    59  
    60  
    61 <script type="text/javascript">
    62  
    63  
    64     function loadDemo() {
    65  
    66         if(navigator.geolocation) {
    67  
    68             document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
    69  
    70             navigator.geolocation.getCurrentPosition(updateLocation);
    71  
    72         }
    73  
    74     }
    其运行结果如下图：
    同样可以将经度纬度赋值给相应google map的api，得出下图所示的结果：
    3.地理位置API获取流程
    相信很多人会问地位位置(Geolocation) API使用的确非常方便，但是也太危险了，用户如何知道哪个应用程序在获取我的位置信息呢？用户如何进行权限设置呢。
    图中标出的1， 2， 3 ，4 分别表示：
    1. 表明一个用户试图打开一个调用地理位置信息的应用程序
    2. 正常情况下，应用程序通过地位位置函数获取位置信息就可以了，但是浏览器会在这个地方将其中断，并请求用户授权，如果通过，则调用该函数，否则返回permission denied。
    3. 浏览器根据上文所述的优先级依次获取设备相关信息，如果IP 地址，GPS信息等等，这是浏览器内部的行为。
    4. 浏览器将坐标信息发送给外部的可信任的位置服务提供商哪里，如google map，位置服务提供商返回该位置的具体信息。
    4. 地理位置API 例子
    这是一个稍微复杂一点的例子，这个例子主要实现一个实时HTML5定位系统，主要代码如下：
    001 <script type="text/javascript">
    002  
    003  
    004     var totalDistance = 0.0;
    005  
    006     var lastLat;
    007  
    008     var lastLong;
    009  
    010  
    011     Number.prototype.toRadians = function() {
    012  
    013       return this * Math.PI / 180;
    014  
    015     }
    016  
    017  
    018     function distance(latitude1, longitude1, latitude2, longitude2) {
    019  
    020       // R is the radius of the earth in kilometers
    021  
    022       var R = 6371;
    023  
    024  
    025       var deltaLatitude = (latitude2-latitude1).toRadians();
    026  
    027       var deltaLongitude = (longitude2-longitude1).toRadians();
    028  
    029       latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
    030  
    031  
    032       var a = Math.sin(deltaLatitude/2) *
    033  
    034               Math.sin(deltaLatitude/2) +
    035  
    036               Math.cos(latitude1) *
    037  
    038               Math.cos(latitude2) *
    039  
    040               Math.sin(deltaLongitude/2) *
    041  
    042               Math.sin(deltaLongitude/2);
    043  
    044  
    045       var c = 2 * Math.atan2(Math.sqrt(a),
    046  
    047                              Math.sqrt(1-a));
    048  
    049       var d = R * c;
    050  
    051       return d;
    052  
    053     }
    054  
    055  
    056     function updateStatus(message) {
    057  
    058         document.getElementById("status").innerHTML = message;
    059  
    060     }
    061  
    062  
    063     function loadDemo() {
    064  
    065         if(navigator.geolocation) {
    066  
    067             updateStatus("HTML5 Geolocation is supported in your browser.");
    068  
    069             navigator.geolocation.watchPosition(updateLocation,
    070  
    071                                                 handleLocationError,
    072  
    073                                                 {maximumAge:20000});
    074  
    075         }
    076  
    077     }
    078  
    079  
    080     function updateLocation(position) {
    081  
    082         var latitude = position.coords.latitude;
    083  
    084         var longitude = position.coords.longitude;
    085  
    086         var accuracy = position.coords.accuracy;
    087  
    088         var timestamp = position.timestamp;
    089  
    090  
    091         document.getElementById("latitude").innerHTML = latitude;
    092  
    093         document.getElementById("longitude").innerHTML = longitude;
    094  
    095         document.getElementById("accuracy").innerHTML = accuracy;
    096  
    097         document.getElementById("timestamp").innerHTML = timestamp;
    098  
    099  
    100         // sanity test... don't calculate distance if accuracy
    101  
    102         // value too large
    103  
    104         if (accuracy >= 500) {
    105  
    106             updateStatus("Need more accurate values to calculate distance.");
    107  
    108             return;
    109  
    110         }
    111  
    112  
    113         // calculate distance
    114  
    115  
    116         if ((lastLat != null) && (lastLong != null)) {
    117  
    118             var currentDistance = distance(latitude, longitude, lastLat, lastLong);
    119  
    120             document.getElementById("currDist").innerHTML =
    121  
    122               "Current distance traveled: " + currentDistance.toFixed(4) + " km";
    123  
    124  
    125             totalDistance += currentDistance;
    126  
    127  
    128             document.getElementById("totalDist").innerHTML =
    129  
    130               "Total distance traveled: " + currentDistance.toFixed(4) + " km";
    131  
    132         }
    133  
    134  
    135         lastLat = latitude;
    136  
    137         lastLong = longitude;
    138  
    139  
    140         updateStatus("Location successfully updated.");
    141  
    142     }
    143  
    144  
    145     function handleLocationError(error) {
    146  
    147         switch(error.code)
    148  
    149         {
    150  
    151         case 0:
    152  
    153           updateStatus("There was an error while retrieving your location: " + error.message);
    154  
    155           break;
    156  
    157         case 1:
    158  
    159           updateStatus("The user prevented this page from retrieving a location.");
    160  
    161           break;
    162  
    163         case 2:
    164  
    165           updateStatus("The browser was unable to determine your location: " + error.message);
    166  
    167           break;
    168  
    169         case 3:
    170  
    171           updateStatus("The browser timed out before retrieving the location.");
    172  
    173           break;
    174  
    175         }
    176  
    177     }
    178  
    179  
    180 </script>
    完整代码下载地址：下载
  • 相关阅读:
    MySQL改变表的存储引擎
    数字三角形合集
    POJ 3250 Bad Hair Day 单调栈
    Linux 网卡驱动学习（二）（网络驱动接口小结）
    Lecture Notes: Macros
    [转]LNMP环境下的Web常见问题排查（精品）
    ssh-copy-id password
    python
    python
    Ceph
  • 原文地址：https://www.cnblogs.com/webapplee/p/3771676.html
Copyright © 2011-2022 走看看