HTML5 – 地理定位

在Web应用程序中，地理位置定位功能是非常有用的，例如在订外卖时确定送餐地址，在使用上传文件时标记照片拍摄地点，或者在天气预报应用程序中获取用户所处位置的气象信息等等。HTML5提供了几种方法来实现地理位置定位，本文将为您详细介绍其中几种方法及其应用。

Geolocation API

Geolocation API是HTML5中最重要的定位特性之一，它允许Web应用程序从移动设备或计算机浏览器获取用户的地理位置信息，即使应用程序没有GPS设备也可以做到。该API提供了getCurrentPosition() 和 watchPosition() 两个方法来获取地理位置信息。

getCurrentPosition() 方法

getCurrentPosition() 方法是使用最广泛的定位方法之一，它可以一次性获取用户的地理位置信息。该方法有两个参数：成功回调和失败回调。成功回调函数将包含一个Position对象，该对象包含一个可获取到经纬度信息的Coords对象和其他一些属性来描述设备的运行状况。如果获取位置信息失败，失败回调函数将被调用。

下面是getCurrentPosition() 方法的示例代码：

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("Latitude: " + latitude + ", Longitude: " + longitude);
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}

在上述示例中，getLocation() 函数检查是否支持地理位置服务，如果支持，则调用getCurrentPosition() 方法来获取地理位置信息。成功回调showPosition() 函数显示获取到的经纬度信息。失败回调showError() 函数将根据错误码显示相应错误信息。

watchPosition() 方法

watchPosition() 方法可以重复地轮询获取用户的地理位置信息，并将其反映在地图上。该方法和getCurrentPosition() 方法使用的参数是一样的。

下面是watchPosition() 方法的示例代码：

var watchID;

function getLocation() {
  if (navigator.geolocation) {
    watchID = navigator.geolocation.watchPosition(showPosition, showError);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("Latitude: " + latitude + ", Longitude: " + longitude);
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}

在上述示例中，getLocation() 函数通过watchPosition() 方法重复获取地理位置信息，并将其保存在watchID 变量中。成功回调showPosition() 函数显示获取到的经纬度信息。失败回调showError() 函数将根据错误码显示相应错误信息。

Geolocation API 应用

下面是一个使用Geolocation API 的实例，该实例根据用户当前的经纬度信息，在地图上标记出去某餐厅的路线：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Mapping Directions</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
   <style>
      #mapid {
         height: 500px;
      }
   </style>
</head>
<body>
   <div id="mapid"></div>
   <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
   <script>
      var map = L.map('mapid');
      var restaurantLocation = L.latLng(42.361145, -71.057083);
      var userLocation;

      getLocation();

      function getLocation() {
         if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
         } else {
            alert("Geolocation is not supported by this browser.");
         }
      }

      function showPosition(position) {
         userLocation = L.latLng(position.coords.latitude, position.coords.longitude);
         map.setView(userLocation, 13);
         L.marker(restaurantLocation).addTo(map).bindPopup("<b>Restaurant Name</b><br>Address").openPopup();
         L.Routing.control({
            waypoints: [
               userLocation,
               restaurantLocation
            ],
            routeWhileDragging: true
         }).addTo(map);
      }

      function showError(error) {
         switch (error.code) {
            case error.PERMISSION_DENIED:
               alert("User denied the request for Geolocation.");
               break;
            case error.POSITION_UNAVAILABLE:
               alert("Location information is unavailable.");
               break;
            case error.TIMEOUT:
               alert("The request to get user location timed out.");
               break;
            case error.UNKNOWN_ERROR:
               alert("An unknown error occurred.");
               break;
         }
      }
   </script>
</body>
</html>

在上述代码中，我们使用了leaflet.js 库来创建地图和路线，使用getCurrentPosition() 方法获取用户当前位置，并将其存储在userLocation 变量中。在地图上标记了一个餐厅位置，并在用户位置和餐厅位置之间绘制了路线。

Geocoding API

Geocoding API 可以将地理信息转换为经纬度，或将经纬度转换为可读的地理位置信息。它可以用于创建互动地图、开发位置搜索应用或将地理位置与其他数据集成。

使用 Geocoding API 获取地理位置信息

下面是使用Geocoding API 将地址转换为经纬度的示例代码：

var address = "1600 Amphitheatre Parkway, Mountain View, CA";
var url = "https://maps.googleapis.com/maps/api/geocode/json?key=YOUR_API_KEY&address=" + address;

fetch(url)
   .then(response => response.json())
   .then(data => {
      var lat = data.results[0].geometry.location.lat;
      var lng = data.results[0].geometry.location.lng;
      console.log("Latitude: " + lat + ", Longitude: " + lng);
   });

在上述示例中，我们使用了Google Maps API的Geocoding API来获取地址的经纬度信息。使用fetch()方法，将URL作为参数通过API获取位置信息，并使用lat 和lng 变量获取获取经纬度信息。

使用 Geocoding API 获取地址信息

下面是使用Geocoding API 将经纬度转换为地址的示例代码：

var url = "https://maps.googleapis.com/maps/api/geocode/json?key=YOUR_API_KEY&latlng=37.7749,-122.4194";

fetch(url)
  .then(response => response.json())
  .then(data => {
      var address = data.results[0].formatted_address;
      console.log("Address: " + address);
  });

在上述示例中，我们使用了Google Maps API的Geocoding API来获取经纬度的地址信息。使用fetch()方法，将URL作为参数通过API获取位置信息，并使用address 变量获取获取地址信息。