到目前為止，我們已經(jīng)看到許多功能是使用 HTML 設(shè)計(jì)的。 HTML 中包含的最新高級(jí)功能之一是地理定位。 HTML 地理定位對于檢測地圖上的用戶位置最有用。因此，這個(gè)功能是用 HTML 設(shè)計(jì)的，以識(shí)別用戶在地圖上的確切位置?？梢允褂锰囟ㄓ脩粑恢玫木暥群徒?jīng)度屬性來識(shí)別用戶的位置。僅當(dāng)用戶允許其訪問該位置時(shí)，它才能檢索信息。此 HTML 功能主要用于本地商業(yè)目的，用于查找餐館或在地圖上選擇位置。
語法
HTML 地理定位的語法如下：可以使用 location API，它將使用全局導(dǎo)航器對象，如下所示：
var locat = navigator.geolocation;
進(jìn)入上面的語法導(dǎo)航器。 Geolocation負(fù)責(zé)用戶瀏覽器獲取其位置信息；定義了一種訪問方式。瀏覽器可以提供設(shè)備上現(xiàn)有的最佳功能，因此人們可以輕松訪問這些數(shù)據(jù)。
可以通過使用不同的方式有效地訪問這些數(shù)據(jù)，例如 getCurrentPosition 來了解用戶或設(shè)備的當(dāng)前位置，watchPosition 每當(dāng)設(shè)備位置發(fā)生變化時(shí)都會(huì)很有幫助，還有一種方式像clearWatch 有助于清除地理定位功能中的所有調(diào)用。
此功能適用于某些接口，如下所示：
-
Geolocation：是主類最重要的API之一，其中包括一些幫助獲取用戶當(dāng)前位置、觀察位置變化等的方法
-
GeolocationPosition: 用于定義用戶的位置。每當(dāng)在某個(gè)地理位置中識(shí)別到成功調(diào)用時(shí)，它將與其對象實(shí)例進(jìn)行協(xié)調(diào)。
-
地理位置坐標(biāo)：這有助于識(shí)別用戶位置的坐標(biāo)。
-
GeolocationPositionError:調(diào)用此接口是因?yàn)檎{(diào)用失敗返回到地理位置包含的方法中。
-
Geolocation： 當(dāng)在 geolocation 中調(diào)用 geolocation 對象實(shí)例時(shí)，這很有用。因此可以從這里訪問所有其他功能。
地理定位方法+63
HTML geolocation 中總共使用了 3 種方法來通過 geolocation 接口定義位置；如下：
-
getCurrentPosition()：HTML 地理定位中的這種基本方法有助于檢測設(shè)備或用戶的當(dāng)前地理位置及其在地圖上的返回?cái)?shù)據(jù)。此方法適用于不同的參數(shù)，例如成功、錯(cuò)誤、選項(xiàng)。
-
watchPosition(): 每當(dāng)用戶想要在設(shè)備位置更改后檢查位置時(shí)，都會(huì)在代碼中調(diào)用此方法來檢查更改后的設(shè)備位置。此方法調(diào)用錯(cuò)誤回調(diào)函數(shù)，例如未知隨機(jī)錯(cuò)誤。如果給定的位置信息不可用并且給定的請求位置超時(shí)，則用戶不允許共享位置。
-
clearWatch():人們可以取消之前的 watchPosition() 調(diào)用，并且可以使用這種 HTML 地理定位方法取消正在進(jìn)行的 watchPosition 調(diào)用
HTML 地理定位示例
以下是 HTML 地理定位的示例
示例#1
在第一個(gè)示例中，我們將查看我們的瀏覽器是否支持此地理定位功能；這是它的代碼，如下所述：
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>
輸出：
示例#2
在此示例中，我們將使用 HTML 地理定位功能來顯示確切位置，因此它將顯示地圖上的確切位置，其緯度和經(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)擊按鈕后，輸出如下圖
示例 #3
在此示例中，我們將使用 HTML 地理定位功能來顯示確切位置，因此它將顯示地圖上的確切位置，其緯度和經(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í)別設(shè)備或用戶位置的功能。
它使用緯度和經(jīng)度屬性來識(shí)別用戶的確切位置。
此功能適用于不同的方法，例如 getCurrentPosition、watchPosition 和clearWatch。
以上是HTML 地理定位的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！