到目前为止，我们已经看到许多功能是使用 HTML 设计的。 HTML 中包含的最新高级功能之一是地理定位。 HTML 地理定位对于检测地图上的用户位置最有用。因此，这个功能是用 HTML 设计的，以识别用户在地图上的确切位置。可以使用特定用户位置的纬度和经度属性来识别用户的位置。仅当用户允许其访问该位置时，它才能检索信息。此 HTML 功能主要用于本地商业目的，用于查找餐馆或在地图上选择位置。
HTML 地理定位的语法如下：可以使用 location API，它将使用全局导航器对象，如下所示：
var locat = navigator.geolocation;
进入上面的语法导航器。 Geolocation负责用户浏览器获取其位置信息；定义了一种访问方式。浏览器可以提供设备上现有的最佳功能，因此人们可以轻松访问这些数据。
可以通过使用不同的方式有效地访问这些数据，例如 getCurrentPosition 来了解用户或设备的当前位置，watchPosition 每当设备位置发生变化时都会很有帮助，还有一种方式像clearWatch 有助于清除地理定位功能中的所有调用。
此功能适用于某些接口，如下所示：
HTML geolocation 中总共使用了 3 种方法来通过 geolocation 接口定义位置；如下：
以下是 HTML 地理定位的示例
在第一个示例中，我们将查看我们的浏览器是否支持此地理定位功能；这是它的代码，如下所述：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>输出：
在此示例中，我们将使用 HTML 地理定位功能来显示确切位置，因此它将显示地图上的确切位置，其纬度和经度属性值如下：
HTML 代码：
<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: " + position.coords.latitude +
"<br>Longitude Attribute Value: " + position.coords.longitude;
}
</script>
</body>
</html>输出：
点击按钮后，输出如下图
在此示例中，我们将使用 HTML 地理定位功能来显示确切位置，因此它将显示地图上的确切位置，其纬度和经度属性值如下：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</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")
}
}
// 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("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
} </script>
</body>
</html>输出：
从以上所有信息中，我们了解到 HTML 地理定位是一种用于在地图上识别设备或用户位置的功能。
它使用纬度和经度属性来识别用户的确切位置。
此功能适用于不同的方法，例如 getCurrentPosition、watchPosition 和clearWatch。
以上是HTML 地理定位的详细内容。更多信息请关注PHP中文网其他相关文章！
