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

Por Dawei Cheng 程大伟, publicado em 1 de março de 2012

Traduzindo...
Esta é uma tradução do conteúdo original feita por computador. Ela é fornecida para fins de informação genérica e não deve ser usada como se fosse completa ou precisa.
介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

本篇是HTML5介绍的第五篇，主要介绍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的函数：


    function updateLocation(position) {

        var latitude = position.coords.latitude;

        var longitude = position.coords.longitude;


        if (!latitude || !longitude) {

            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";

            return;

        }


        document.getElementById("latitude").innerHTML = latitude;

        document.getElementById("longitude").innerHTML = longitude;

    }

在这段代码中，使用

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

这两个变量来保存经度和纬度，并将其返回给HTML代码，本例的其余代码如下所示：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>HTML5 Geolocation</title>

    <link rel="stylesheet" href="styles.css">

</head>


<body onload="loadDemo()">


<h1>HTML5 Geolocation Example</h1>


<span class="info">

  <p id="status">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p>

</span>


<h2>Current Position:</h2>

<table border="1">

          <tr>

            <th width="40" scope="col"><h5 align="left">Lat.</h5></th>

             <td width="114" id="latitude">?</td>

          </tr>

          <tr>

            <td><h5>Long.</h5></td>

            <td id="longitude">?</td>

          </tr>

          <tr>

            <td><h5>Time</h5></td>

            <td id="longitude2">11:00:00 a.m.</td>

          </tr>

</table>


<p align="center" class="style2">Copyright (c) 2010</p>


<script type="text/javascript">


    function loadDemo() {

        if(navigator.geolocation) {

            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";

            navigator.geolocation.getCurrentPosition(updateLocation);

        }

    }


其运行结果如下图：


同样可以将经度纬度赋值给相应google map的api，得出下图所示的结果：


3.地理位置API获取流程

相信很多人会问地位位置(Geolocation) API使用的确非常方便，但是也太危险了，用户如何知道哪个应用程序在获取我的位置信息呢？用户如何进行权限设置呢。


图中标出的1， 2， 3 ，4 分别表示：

1. 表明一个用户试图打开一个调用地理位置信息的应用程序

2. 正常情况下，应用程序通过地位位置函数获取位置信息就可以了，但是浏览器会在这个地方将其中断，并请求用户授权，如果通过，则调用该函数，否则返回permission denied。

3. 浏览器根据上文所述的优先级依次获取设备相关信息，如果IP 地址，GPS信息等等，这是浏览器内部的行为。

4. 浏览器将坐标信息发送给外部的可信任的位置服务提供商哪里，如google map，位置服务提供商返回该位置的具体信息。


4. 地理位置API 例子

这是一个稍微复杂一点的例子，这个例子主要实现一个实时HTML5定位系统，主要代码如下：


<script type="text/javascript">


    var totalDistance = 0.0;

    var lastLat;

    var lastLong;


    Number.prototype.toRadians = function() {

      return this * Math.PI / 180;

    }


    function distance(latitude1, longitude1, latitude2, longitude2) {

      // R is the radius of the earth in kilometers

      var R = 6371;


      var deltaLatitude = (latitude2-latitude1).toRadians();

      var deltaLongitude = (longitude2-longitude1).toRadians();

      latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();


      var a = Math.sin(deltaLatitude/2) *

              Math.sin(deltaLatitude/2) +

              Math.cos(latitude1) *

              Math.cos(latitude2) *

              Math.sin(deltaLongitude/2) *

              Math.sin(deltaLongitude/2);


      var c = 2 * Math.atan2(Math.sqrt(a),

                             Math.sqrt(1-a));

      var d = R * c;

      return d;

    }


    function updateStatus(message) {

        document.getElementById("status").innerHTML = message;

    }


    function loadDemo() {

        if(navigator.geolocation) {

            updateStatus("HTML5 Geolocation is supported in your browser.");

            navigator.geolocation.watchPosition(updateLocation,

                                                handleLocationError,

                                                {maximumAge:20000});

        }

    }


    function updateLocation(position) {

        var latitude = position.coords.latitude;

        var longitude = position.coords.longitude;

        var accuracy = position.coords.accuracy;

        var timestamp = position.timestamp;


        document.getElementById("latitude").innerHTML = latitude;

        document.getElementById("longitude").innerHTML = longitude;

        document.getElementById("accuracy").innerHTML = accuracy;

        document.getElementById("timestamp").innerHTML = timestamp;


        // sanity test... don't calculate distance if accuracy

        // value too large

        if (accuracy >= 500) {

            updateStatus("Need more accurate values to calculate distance.");

            return;

        }


        // calculate distance


        if ((lastLat != null) && (lastLong != null)) {

            var currentDistance = distance(latitude, longitude, lastLat, lastLong);

            document.getElementById("currDist").innerHTML =

              "Current distance traveled: " + currentDistance.toFixed(4) + " km";


            totalDistance += currentDistance;


            document.getElementById("totalDist").innerHTML =

              "Total distance traveled: " + currentDistance.toFixed(4) + " km";

        }


        lastLat = latitude;

        lastLong = longitude;


        updateStatus("Location successfully updated.");

    }


    function handleLocationError(error) {

        switch(error.code)

        {

        case 0:

          updateStatus("There was an error while retrieving your location: " + error.message);

          break;

        case 1:

          updateStatus("The user prevented this page from retrieving a location.");

          break;

        case 2:

          updateStatus("The browser was unable to determine your location: " + error.message);

          break;

        case 3:

          updateStatus("The browser timed out before retrieving the location.");

          break;

        }

    }


</script>

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.