🀢

使用 Google 地图

要在页面中使用 Google 地图，需要用到 Google Map API 。

在页面中导入 Google Map API 的脚本文件，导入方法如下所示。

✂️

html

<head>
  <script>
    function init() {
      //取得当前地理位置
      navigator.geolocation.getCurrentPosition(function (position) {
        var coords = position.coords;
        // 设定地图参数，将用户的当前位置的纬度、经度设定为地图的中心点
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        // 创建地图并在 "map" 的 div 中显示
        var map1;
        map1 = new google.maps.Map(document.getElementById('map'), myOptions);
        // 在地图上创建标记
        var marker = new google.maps.Marker({ position: latlng, map: map1 });
        // 设定标注窗口，并指定该窗口中的注释文字
        var infowindow = new google.maps.InfoWindow({ content: ' 当前位置 !' });
        // 打开标注窗口 info
        window.open(map1, marker);
      });
    }
  </script>
</head>
<body onload="init()">
  <div id="map" style="width:400px; height:400px"></div>
</body>

跟踪行走速度

使用 watchPosition() 函数，每当有新的位置返回，就将其与最后保存的位置进行比较以计算距离。所有缓存位置数据的生命周期都不能大于 205 。

创建示例程序的 HTML 显示代码。这里重点介绍处理数据的脚本，并把所有最新的数据以简单的表格形式展示，分行显示纬度、经度、准确度和以毫秒为单位的时间。此外，显示走过距离的概要情况，还会显示一些文本类统计信息，以便用户能够看到走过距离的概况。
处理 Geolocation 数据。在 Geolocation 数据处理部分，第一段 JavaScript 代码会检测浏览器是否支持 HTML5 Geolocation ，然后将检测结果显示在页面上。最后，代码会请求监测用户位置。
对于距离跟踪器而言，这些出错处理已经足够了，它将检查收到的所有错误编号，并更新页面上的状态信
大部分工作都将在 updateLocation() 函数中实现，此函数中将使用最新数据来更新页面并计算路程
计算移动的距离。假设前面已经收到了一个准确的位置，将更新移动的总距离并将其显示给用户，同时还将储存当前值以备后面做比较。为了使界面不太乱，在计算数值时可采用四舍五入或截断的方式

✂️

html

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body onload="loadDemo()">
  <h2> 当前位置
    :</h2>
  <table border="1">
    <tr>
      <th width="40" scope="col"> 纬度 </th>
      <td width="114" id="latitude">?</td>
    </tr>
    <tr>
      <td>经度 </td>
      <td id="longitude">? |
    <tr>
      <td> 准确性
      </td>
      <td id="accuracy">?</td>
      | 最后时间 </td>
      <td id="timestamp">? |
  </table>
  <h4 id="currDist"> 当前行驶距离 : 0.0 km</h4>
  <h4 id="totalDist"> 总距离 : 0.0 km</h4>
  <script>

    var totalDistance = 0.0; var lastLat; var
      lastLong;
    Number.prototype.toRadians = function () {
      return this * Math.PI / 180;
    }
    function distance(latitude1, longitude1, latitude2,
      longitude2) {
      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; if
        (accuracy >= 500) {
        updateStatus("Need more accurate values to calculate distance.");
        return;
      } 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>
</body>

</html>