HTML5 地理定位

2025 年 3 月 25 日 | 阅读 5 分钟

地理定位是 HTML5 最好的 API 之一，它用于识别用户地理位置以用于 Web 应用程序。

HTML5 的这项新功能允许您获取当前网站访问者的纬度和经度坐标。这些坐标可以由 JavaScript 捕获并发送到服务器，服务器可以在网站上显示您的当前位置。

大多数地理定位服务使用网络路由地址（如 IP 地址、RFID、WIFI 和 MAC 地址或内部 GPS 设备）来识别用户的位置。

提示：要完全理解地理定位 API 的概念，您必须具备一些 JavaScript 知识。

用户隐私

用户位置是一个隐私问题，因此地理定位 API 在获取位置之前会征得用户许可，从而保护用户隐私。地理定位 API 会发送一个通知提示框，用户可以选择允许或拒绝，只有当用户允许后，才会识别其位置。

注意：您的浏览器必须支持地理定位才能将其用于 Web 应用程序。虽然大多数浏览器和移动设备都支持地理定位 API，但该 API 仅适用于 HTTPS 请求。

地理定位对象

地理定位 API 与 navigation.geolocation 对象一起工作。这是一个只读属性，返回一个 Geolocation 对象，该对象标识用户的位置，并可以根据用户位置生成自定义结果。

语法

如果此对象存在，则可以使用地理定位服务。

地理定位方法

地理定位 API 使用 Geolocation 接口的三个方法，如下所示：

方法	描述
getCurrentPosition()	它识别设备或用户当前的位置，并返回一个带有数据的 position 对象。
watchPosition()	当设备位置更改时返回一个值。
clearWatch()	它取消先前的 watchPosition() 调用。

检查浏览器支持情况

navigator.geolocation 对象的 geolocation 属性有助于确定浏览器对地理定位 API 的支持情况。

 <!DOCTYPE html>
<html>
<head>
	<title>Geolocation API</title>
</head>
<body>
  <h1>Find your Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
	var x= document.getElementById("location");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
    function getlocation() {
    	if(navigator.geolocation){
    		alert("your browser is supporting Geolocation API")
    	}
    	else
    	{
    		alert("Sorry! your browser is not supporting")
    	}
    }
</script>
</body>
</html>

获取用户的当前位置

要获取用户当前位置，可以使用 navigator.geolocation 对象的 getCurrentPosition() 方法。此方法接受三个参数：

success: 一个用于获取用户位置的成功回调函数。
error: 一个错误回调函数，它接受一个“Position Error”对象作为输入。
options: 它定义了获取位置的各种选项。

下面的示例将返回访问者当前位置的经度和纬度。

示例

<!DOCTYPE html>
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
  <h1>Find your Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
	var x= document.getElementById("location");
    function getlocation() {
    	if(navigator.geolocation){
    		navigator.geolocation.getCurrentPosition(showPosition)
    	  }
    	else
    	{
             alert("Sorry! your browser is not supporting")
         } }
     
     function showPosition(position){
       var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " +    position.coords.longitude + ")";
                document.getElementById("location").innerHTML = x;
     }
</script>
</body>
</html>

说明

首先检查浏览器支持情况
使用 getCurrentPosition() 获取当前位置
使用 showPosition() 方法获取经度和纬度值，该方法是 getCurrentPosition() 的回调方法。

处理错误和拒绝：使用错误回调函数

getCurrentPosition 的第二个参数是一个错误回调函数。它是一个可选参数，用于在获取用户位置时处理错误和用户拒绝。

以下是调用错误回调函数的可能选项：

发生了未知随机错误。
如果用户拒绝共享位置。
位置信息不可用。
位置请求超时。

示例

function showError(error) {
     	switch(error.code){
     		case error.PERMISSION_DENIED:
			alert("User denied the request for Geolocation API.");
			break;
		case error.POSITION_UNAVAILABLE:
			alert("USer 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;
	}
     	}

在 Google 地图上显示位置

到目前为止，我们已经看到了如何使用经纬度值显示您的位置，但这还不够。因此，我们也可以使用此 API 在 Google 地图上显示确切位置。

以下示例显示使用 Google 地图的位置。

示例

<!DOCTYPE html> 
<html> 
    <head> 
      <title>Geolocation API</title> 
     </head> 
    <body> 
       <h2>Find Your Location in below Map</h2> 
        <button onclick="getlocation();"> Show Position</button> 
        <div id="demo" style="width: 600px; height: 400px; margin-left: 200px;"></div> 
       
        <script src="https://maps.google.com/maps/api/js?sensor=false"> </script> 
        
        <script type="text/javascript"> 
        function getlocation(){ 
            if(navigator.geolocation){ 
                navigator.geolocation.getCurrentPosition(showPos, showErr); 
            }
            else{
                alert("Sorry! your Browser does not support Geolocation API")
            }
        } 
        //Showing Current Poistion on Google Map
        function showPos(position){ 
            latt = position.coords.latitude; 
            long = position.coords.longitude; 
            var lattlong = new google.maps.LatLng(latt, long); 
            var myOptions = { 
                center: lattlong, 
                zoom: 15, 
                mapTypeControl: true, 
                navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL} 
            } 
            var maps = new google.maps.Map(document.getElementById("demo"), myOptions); 
            var markers = 
            new google.maps.Marker({position:lattlong, map:maps, title:"You are here!"}); 
        } 

        //Handling Error and Rejection
             function showErr(error) {
              switch(error.code){
              case error.PERMISSION_DENIED:
             alert("User denied the request for Geolocation API.");
              break;
             case error.POSITION_UNAVAILABLE:
             alert("USer 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>     

要了解更多关于 Google Maps JavaScript API 的信息，您可以点击以下链接：

https://developers.google.com/maps/documentation/javascript/reference。

位置属性

地理定位 API 的 getCurrentPosition() 方法返回回调方法，这些方法检索用户位置信息。此回调方法返回一个 Position 对象，该对象包含所有位置信息并指定不同的属性。它始终返回纬度和经度属性，但下表描述了 Position 对象的一些其他属性。

性质	描述
coords.latitude	以十进制数字返回用户位置的纬度。
coords.longitude	以十进制数字返回用户位置的经度。
coords.altitude	返回海平面以上的高度（米）（仅当可用时）。
coords.accuracy	返回用户位置的准确性。
coords.altitudeAccuracy	返回用户位置的高度准确性（如果可用）。
coords.heading	以度为单位，从正北顺时针方向返回方向（如果可用）。
coords.speed	以米/秒为单位返回速度（如果可用）。
时间戳	返回响应的数据或时间（如果可用）。