HTML 地理定位-html教學-PHP中文網

文法

地理定位方法+63

HTML 地理定位範例

範例 #3

結論

首頁

web前端

html教學

HTML 地理定位

王林

Sep 04, 2024 pm 04:51 PM

html html5 HTML Tutorial HTML Properties HTML tags

到目前為止，我們已經看到許多功能是使用 HTML 設計的。 HTML 中包含的最新進階功能之一是地理定位。 HTML 地理定位對於偵測地圖上的使用者位置最有用。因此，這個功能是用 HTML 設計的，以識別使用者在地圖上的確切位置。可以使用特定使用者位置的緯度和經度屬性來識別使用者的位置。僅當使用者允許其存取該位置時，它才能檢索資訊。此 HTML 功能主要用於本地商業目的，用於尋找餐廳或在地圖上選擇位置。

文法

HTML 地理定位的語法如下：可以使用 location API，它將使用全域導航器對象，如下所示：

var locat = navigator.geolocation;

登入後複製

進入上面的語法導航器。 Geolocation負責使用者瀏覽器取得其位置資訊；定義了一種存取方式。瀏覽器可以提供設備上現有的最佳功能，因此人們可以輕鬆存取這些資料。

可以透過使用不同的方式有效地存取這些數據，例如getCurrentPosition 來了解用戶或設備的當前位置，watchPosition 每當設備位置發生變化時都會很有幫助，還有一種方式像clearWatch 有助於清除地理定位功能中的所有呼叫。

此功能適用於某些接口，如下所示：

Geolocation：是主類別最重要的API之一，其中包含一些幫助取得使用者目前位置、觀察位置變化等的方法
GeolocationPosition: 用來定義使用者的位置。每當在某個地理位置中識別到成功呼叫時，它將與其物件實例進行協調。
地理位置座標：這有助於識別使用者位置的座標。
GeolocationPositionError:呼叫此介面是因為呼叫失敗會回到地理位置包含的方法。
Geolocation： 當在 geolocation 中呼叫 geolocation 物件實例時，這很有用。因此可以從這裡存取所有其他功能。

地理定位方法+63

HTML geolocation 中總共使用了 3 種方法來透過 geolocation 介面定義位置；如下：

getCurrentPosition()：HTML 地理定位中的這種基本方法有助於偵測裝置或使用者目前的地理位置及其在地圖上的回傳資料。此方法適用於不同的參數，例如成功、錯誤、選項。
watchPosition(): 每當使用者想要在裝置位置變更後檢查位置時，都會在程式碼中呼叫此方法來檢查變更後的裝置位置。此方法呼叫錯誤回呼函數，例如未知隨機錯誤。如果給定的位置資訊不可用且給定的請求位置逾時，則使用者不允許共用位置。
clearWatch():人們可以取消先前的 watchPosition() 調用，並且可以使用這種 HTML 地理定位方法取消正在進行的 watchPosition 呼叫

HTML 地理定位範例

以下是 HTML 地理定位的範例

範例#1

在第一個範例中，我們將查看我們的瀏覽器是否支援此地理定位功能；這是它的程式碼，如下所述：

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 地理定位

範例#2

在此範例中，我們將使用 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 地理定位

範例 #3

在此範例中，我們將使用 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 地理定位