如何在 HTML5 中获取用户的地理位置？

简介：在本文中，我们将了解如何在 HTML5 中获取用户的地理位置。

方法：为了在 HTML5 中获取用户的地理位置，我们使用 geolocation API。如果用户允许，HTML5 中的地理位置用于与某些网站共享用户的位置。它使用 JavaScript 来获取纬度和经度。大多数浏览器都支持 Geolocation API。

句法：

var Location =navigator.geolocation.getCurrentPosition()

上述语法中的变量位置具有以下属性：

• coords.latitude：总是以十进制数返回纬度
• coords.accuracy：总是返回位置的精度
• coords.longitude：总是以十进制数返回经度
• coords.altitude：如果可用，以米为单位返回海拔高度
• coords.altitudeAccuracy：返回位置的高度精度（如果可用）
• coords.heading：如果可用，返回从北顺时针方向的航向
• coords.speed：如果可用，以 MPS 为单位返回速度
• 时间戳：返回响应的日期或时间（如果可用）

示例 1：在此示例中，我们将使用使用 Geolocation API 创建的 Location 对象显示用户权限的经度和纬度。

HTML

  

    Latitude and longitude

  

    
        
            GeeksforGeeks
        
  
        
    
      
    
        var Location = document.getElementById("Location");
        navigator.geolocation.getCurrentPosition(showLocation);
  
        function showLocation(position) {
            Location.innerHTML =
                "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
    

  

输出：

输出

示例 2：在此示例中，我们使用 Mapbox 使用我们到达那里的纬度和经度来显示用户在地图上的位置。以下是创建谷歌地图框的步骤：

第一步：在 HTML 页面中添加以下脚本以启用谷歌地图框函数。

第 2 步：使用以下命令创建具有经度和纬度坐标的 lattlong 对象：

var lattlong = new google.maps.LatLng(latitude, longitude);

第 3 步：使用以下代码创建 Mapbox，该代码以用户在 div 中的位置为中心，ID 为 Map：

var Mapmain = new google.maps.Map(document.getElementById("Map"));

下面是上述方法的实现。

HTML

  

    Latitude and longitude
    
    

  

    
        
            GeeksforGeeks
        
          
        
    
    
        var Location = document.getElementById("Location");
        navigator.geolocation.getCurrentPosition(showLocation);
  
        function showLocation(position) {
            latt = position.coords.latitude;
            long = position.coords.longitude;
            var lattlong = new google.maps.LatLng(latt, long);
            var Options = {
                center: lattlong,
                zoom: 15,
                mapTypeControl: true,
                navigationControlOptions:
                    { style: google.maps.NavigationControlStyle.SMALL }
            }
            var Mapmain = new google.maps.Map
                (document.getElementById("Map"), Options);
            var markerpos =
                new google.maps.Marker
                    ({ position: lattlong, map: Mapmain });
        }
    

  

输出：

输出