これまで、多くの機(jī)能が HTML を使用して設(shè)計されているのを見てきました。 HTML に含まれる最新かつ高度な機(jī)能の 1 つは地理位置情報です。 HTML 地理位置情報は、地図上のユーザーの位置を検出するのに最も役立ちます。したがって、この機(jī)能は、地図上のユーザーの正確な位置を識別するために HTML で設(shè)計されています。このユーザの位置は、特定のユーザ位置の緯度経度と呼ばれる屬性を利用して特定することができる。これは、ユーザーがその場所へのアクセスを許可した場合にのみ情報を取得できます。この HTML 機(jī)能は主にローカル ビジネスの目的、レストランの検索、地図上の場所の選択に使用されます。
構(gòu)文
HTML 地理位置情報の構(gòu)文は次のとおりです。位置 API を使用できます。これは、以下に示すグローバル ナビゲーター オブジェクトを使用します。
var locat = navigator.geolocation;
上記の構(gòu)文ナビゲーターに入ります。地理位置情報は、ユーザーのブラウザーが位置情報にアクセスする責(zé)任を負(fù)います。 1 つのアクセスが定義されています。ブラウザはデバイス上に存在する最高の機(jī)能を提供できるため、このデータに簡単にアクセスできます。
このデータには、ユーザーまたはデバイスの現(xiàn)在位置を知るための getCurrentPosition や、デバイスの位置が変更されるたびに役立つ watchPosition などのさまざまな方法と、クリアに役立つ ClearWatch などの別の方法を使用することで、効率的にアクセスできます。地理位置情報機(jī)能のすべての呼び出し。
この機(jī)能は、次のような一部のインターフェースで動作します:
-
Geolocation: これは、メイン クラスの最も重要な API の 1 つであり、ユーザーの現(xiàn)在位置を取得したり、位置の変化を監(jiān)視したりするのに役立ついくつかのメソッドが含まれています。
-
GeolocationPosition: これはユーザーの位置を定義するために使用されます。成功した呼び出しが地理位置情報のいずれかで識別されると、そのオブジェクト インスタンスと調(diào)整されます。
-
地理位置座標(biāo): これは、ユーザーの位置の座標(biāo)を特定するのに役立ちます。
-
GeolocationPositionError: このインターフェイスは、呼び出しが失敗した場合に呼び出され、地理位置情報に含まれるメソッドに返されます。
-
地理位置情報: これは、地理位置情報オブジェクトのインスタンスが地理位置情報で呼び出される場合に便利です。したがって、ここから他のすべての機(jī)能にアクセスできます。
地理位置情報の方法+63
地理位置情報インターフェースで位置を定義するために、HTML 地理位置情報で使用されるメソッドは合計 3 つあります。それらは次のとおりです:
-
getCurrentPosition(): HTML 地理位置情報のこの基本メソッドは、デバイスまたはユーザーの現(xiàn)在の地理的位置と、地図上で返されるデータを検出するのに役立ちます。このメソッドは、成功、エラー、オプションなどのさまざまなパラメーターで機(jī)能します。
-
watchPosition(): ユーザーがデバイスの位置が変更された後に位置を確認(rèn)したい場合は、変更されたデバイスの位置を確認(rèn)するためにコーディング內(nèi)でこれが呼び出されます。このメソッドは、不明なランダム エラーなどのエラー コールバック関數(shù)を呼び出します。指定された位置情報が利用できず、指定された要求された位置情報がタイムアウトになった場合、ユーザーは位置情報の共有を許可できません。
-
clearWatch(): HTML 地理位置情報のこのメソッドを使用して、進(jìn)行中の watchPosition 呼び出しをキャンセルするだけでなく、前の watchPosition() 呼び出しもキャンセルできる場合があります
HTML 地理位置情報の例
HTML 地理位置情報の例は次のとおりです
例 #1
最初の例では、ブラウザがこの地理位置情報機(jī)能をサポートするかどうかを確認(rè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>
出力:
例 #2
この例では、HTML 地理位置情報機(jī)能を使用して正確な位置を表示するため、次のような緯度と経度の屬性値を使用して地図上の正確な位置が表示されます。
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>
出力:
ボタンをクリックすると、出力は以下のようになります
例 #3
この例では、HTML 地理位置情報機(jī)能を使用して正確な位置を表示するため、次のような緯度と経度の屬性値を使用して地図上の正確な位置が表示されます。
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 地理位置情報の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。