到目前為止，我們已經(jīng)看到許多功能是使用 HTML 設(shè)計(jì)的。 HTML 中包含的最新進(jìn)階功能之一是地理定位。 HTML 地理定位對(duì)於偵測(cè)地圖上的使用者位置最有用。因此，這個(gè)功能是用 HTML 設(shè)計(jì)的，以識(shí)別使用者在地圖上的確切位置。可以使用特定使用者位置的緯度和經(jīng)度屬性來(lái)識(shí)別使用者的位置。僅當(dāng)使用者允許其存取該位置時(shí)，它才能檢索資訊。此 HTML 功能主要用於本地商業(yè)目的，用於尋找餐廳或在地圖上選擇位置。
文法
HTML 地理定位的語(yǔ)法如下：可以使用 location API，它將使用全域?qū)Ш狡鲗?duì)象，如下所示：
var locat = navigator.geolocation;
進(jìn)入上面的語(yǔ)法導(dǎo)航器。 Geolocation負(fù)責(zé)使用者瀏覽器取得其位置資訊；定義了一種存取方式。瀏覽器可以提供設(shè)備上現(xiàn)有的最佳功能，因此人們可以輕鬆存取這些資料。
可以透過(guò)使用不同的方式有效地存取這些數(shù)據(jù)，例如getCurrentPosition 來(lái)了解用戶或設(shè)備的當(dāng)前位置，watchPosition 每當(dāng)設(shè)備位置發(fā)生變化時(shí)都會(huì)很有幫助，還有一種方式像clearWatch 有助於清除地理定位功能中的所有呼叫。
此功能適用於某些接口，如下所示：
-
Geolocation：是主類別最重要的API之一，其中包含一些幫助取得使用者目前位置、觀察位置變化等的方法
-
GeolocationPosition: 用來(lái)定義使用者的位置。每當(dāng)在某個(gè)地理位置中識(shí)別到成功呼叫時(shí)，它將與其物件實(shí)例進(jìn)行協(xié)調(diào)。
-
地理位置座標(biāo)：這有助於識(shí)別使用者位置的座標(biāo)。
-
GeolocationPositionError:呼叫此介面是因?yàn)楹艚惺?huì)回到地理位置包含的方法。
-
Geolocation： 當(dāng)在 geolocation 中呼叫 geolocation 物件實(shí)例時(shí)，這很有用。因此可以從這裡存取所有其他功能。
地理定位方法+63
HTML geolocation 中總共使用了 3 種方法來(lái)透過(guò) geolocation 介面定義位置；如下：
-
getCurrentPosition()：HTML 地理定位中的這種基本方法有助於偵測(cè)裝置或使用者目前的地理位置及其在地圖上的回傳資料。此方法適用於不同的參數(shù)，例如成功、錯(cuò)誤、選項(xiàng)。
-
watchPosition(): 每當(dāng)使用者想要在裝置位置變更後檢查位置時(shí)，都會(huì)在程式碼中呼叫此方法來(lái)檢查變更後的裝置位置。此方法呼叫錯(cuò)誤回呼函數(shù)，例如未知隨機(jī)錯(cuò)誤。如果給定的位置資訊不可用且給定的請(qǐng)求位置逾時(shí)，則使用者不允許共用位置。
-
clearWatch():人們可以取消先前的 watchPosition() 調(diào)用，並且可以使用這種 HTML 地理定位方法取消正在進(jìn)行的 watchPosition 呼叫
HTML 地理定位範(fàn)例
以下是 HTML 地理定位的範(fàn)例
範(fàn)例#1
在第一個(gè)範(fàn)例中，我們將查看我們的瀏覽器是否支援此地理定位功能；這是它的程式碼，如下所述：
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>
輸出：
範(fàn)例#2
在此範(fàn)例中，我們將使用 HTML 地理定位功能來(lái)顯示確切位置，因此它將顯示地圖上的確切位置，其緯度和經(jīng)度屬性值如下：
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>
輸出：
點(diǎn)選按鈕後，輸出如下圖
範(fàn)例 #3
在此範(fàn)例中，我們將使用 HTML 地理定位功能來(lái)顯示確切位置，因此它將顯示地圖上的確切位置，其緯度和經(jīng)度屬性值如下：
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>
輸出：
結(jié)論
從以上所有資訊中，我們了解到 HTML 地理定位是一種用於在地圖上識(shí)別裝置或使用者位置的功能。
它使用緯度和經(jīng)度屬性來(lái)識(shí)別使用者的確切位置。
此功能適用於不同的方法，例如 getCurrentPosition、watchPosition 和clearWatch。
以上是HTML 地理定位的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！