Html5 Geolocation demo

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Geolocation距离跟踪器</title>
</head>

<body onload="loadDemo()">

<h1>HTML5 Geolocation距离跟踪器</h1>

<p id="status">该浏览器不支持HTML5 Geolocation。</p>

<h2>当前位置：</h2>
<table border="1">
<tr>
<td width="40" scope="col">纬度</th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td>经度</td>
<td id="longitude">?</td>
</tr>
<tr>
<td>准确度</td>
<td id="accuracy">?</td>
</tr>
</table>

<h4 id="currDist">本次移动距离：0 千米</h4>
<h4 id="totalDist">总计移动距离：0 千米</h4>


<script type="text/javascript">

    var totalDistance = 0.0;
    var lastLat;
    var lastLong;

    function toRadians(degree) {
      return this * Math.PI / 180;
    }


    function distance(latitude1, longitude1, latitude2, longitude2) {
      // R是地球半径（KM）
      var R = 6371;

      var deltaLatitude = toRadians(latitude2-latitude1);
      var deltaLongitude = toRadians(longitude2-longitude1);
      latitude1 = toRadians(latitude1);
      latitude2 = toRadians(latitude2);

      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。");
            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;

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

        // 如果accuracy的值太大，我们认为它不准确，不用它计算距离
        if (accuracy >= 500) {
            updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");
            return;
        }

        // 计算移动距离

        if ((lastLat != null) && (lastLong != null)) {
            var currentDistance = distance(latitude, longitude, lastLat, lastLong);
            document.getElementById("currDist").innerHTML =
              "本次移动距离：" + currentDistance.toFixed(4) + " 千米";

            totalDistance += currentDistance;

            document.getElementById("totalDist").innerHTML =
              "总计移动距离：" + currentDistance.toFixed(4) + " 千米";
        }

        lastLat = latitude;
        lastLong = longitude;

        updateStatus("计算移动距离成功。");
    }

    function handleLocationError(error) {
        switch(error.code)
        {
        case 0:
          updateStatus("尝试获取您的位置信息时发生错误：" + error.message);
          break;
        case 1:
          updateStatus("用户拒绝了获取位置信息请求。");
          break;
        case 2:
          updateStatus("浏览器无法获取您的位置信息：" + error.message);
          break;
        case 3:
          updateStatus("获取您位置信息超时。");
          break;
        }
    }

</script>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #tripmeter {
        border: 3px double black;
        padding: 10px;
        margin: 10px 0;
      }
      
      p {
        color: #222;
        font: 14px Arial;
      }
      
      span {
        color: #00C;
      }
    </style>
  </head>
  <body>
    <div id="tripmeter">
      <p>
        Starting Location (lat, lon):<br/>
        <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
      </p>
      <p>
        Current Location (lat, lon):<br/>
        <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
      </p>
      <p>
        Distance from starting location:<br/>
        <span id="distance">0</span> km
      </p>
    </div>
    <script>
      window.onload = function() {
        var startPos;
      
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            startPos = position;
            document.getElementById("startLat").innerHTML = startPos.coords.latitude;
            document.getElementById("startLon").innerHTML = startPos.coords.longitude;
          }, function(error) {
            alert("Error occurred. Error code: " + error.code);
            // error.code can be:
            //   0: unknown error
            //   1: permission denied
            //   2: position unavailable (error response from locaton provider)
            //   3: timed out
          });
      
          navigator.geolocation.watchPosition(function(position) {
            document.getElementById("currentLat").innerHTML = position.coords.latitude;
            document.getElementById("currentLon").innerHTML = position.coords.longitude;
            document.getElementById("distance").innerHTML =
              calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                                position.coords.latitude, position.coords.longitude);
          });
        }
      };
      
      // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
      // http://www.movable-type.co.uk/scripts/latlong.html
      // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
      function calculateDistance(lat1, lon1, lat2, lon2) {
        var R = 6371; // km
        var dLat = (lat2-lat1).toRad();
        var dLon = (lon2-lon1).toRad();
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        return d;
      }
      Number.prototype.toRad = function() {
        return this * Math.PI / 180;
      }

    </script>
  </body>
</html>

相关阅读:
CSS中z-index的层级树概念
 随记
 PHP 随笔
 linux 相关
 Nginx 虚拟主机 VirtualHost 配置
 PHP 杂记
 Composer 资料
 PHP Yii架构学习
 java 日志技术汇总(log4j , Commons-logging,.....)
Java 随笔
原文地址：https://www.cnblogs.com/wangwenfei/p/html5.html