到目前為止，我們已經看到許多功能是使用 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中文網其他相關文章！
