Up till now, we had seen many features getting designed using HTML. One of the latest and advanced features included in HTML is geolocation. HTML geolocation is most useful for detecting user location on a map. So this feature gets designed in HTML to identify the exact position of the user on the map. This position of the user can be identified by using attributes called latitude and longitude of specific user position. This can retrieve information only when the user allows it to access the location. This HTML feature mostly used for local business purpose, for finding restaurants, or choosing the location on the map.
Here is the syntax for HTML geolocation is as follows: One can use location API, which will use global navigator object, which is as shown below:
var locat = navigator.geolocation;
Into the above syntax navigator. Geolocation responsible for the user browser to get access to their location information; one access is defined. The browser can provide the best functionality that is present over there on the device, so one can easily access this data.
This data can be accessed efficiently by using different ways like getCurrentPosition to know the current position of user or device, watchPosition, which is helpful whenever the position of the device is getting changed and one more way like clearWatch, which helps to clear all calls in geolocation functionality.
This functionality works on some interfaces those are as follows:
There are total 3 methods used in HTML geolocation for defining position with geolocation interface; those are as follows:
Here are the Examples of HTML Geolocation
In the first example, we are going to see whether our browser will support or not for this geolocation feature; here is the code for it as mentioned below:
HTML code:
<!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>Output:
In this example, we are going to show the exact location with the HTML geolocation feature, so it will show the exact position on the map with attribute value for latitude and longitude is as follows:
HTML code:
<!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>Output:
After clicking on the button, the output will be as shown below
In this example, we are going to show the exact location with the HTML geolocation feature, so it will show the exact position on the map with attribute value for latitude and longitude is as follows:
HTML code:
<!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>Output:
從以上所有資訊中，我們了解到 HTML 地理定位是一種用於在地圖上識別裝置或使用者位置的功能。
它使用緯度和經度屬性來識別使用者的確切位置。
此功能適用於不同的方法，例如 getCurrentPosition、watchPosition 和clearWatch。
Das obige ist der detaillierte Inhalt vonHTML-Geolokalisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
