HTML 地理位置情報-htmlチュートリアル-php.cn

HTML 地理位置情報

王林

リリース： 2024-09-04 16:51:16

オリジナル

515 人が閲覧しました

これまで、多くの機能が HTML を使用して設計されているのを見てきました。 HTML に含まれる最新かつ高度な機能の 1 つは地理位置情報です。 HTML 地理位置情報は、地図上のユーザーの位置を検出するのに最も役立ちます。したがって、この機能は、地図上のユーザーの正確な位置を識別するために HTML で設計されています。このユーザの位置は、特定のユーザ位置の緯度経度と呼ばれる属性を利用して特定することができる。これは、ユーザーがその場所へのアクセスを許可した場合にのみ情報を取得できます。この HTML 機能は主にローカルビジネスの目的、レストランの検索、地図上の場所の選択に使用されます。

構文

HTML 地理位置情報の構文は次のとおりです。位置 API を使用できます。これは、以下に示すグローバルナビゲーターオブジェクトを使用します。

var locat = navigator.geolocation;

ログイン後にコピー

上記の構文ナビゲーターに入ります。地理位置情報は、ユーザーのブラウザーが位置情報にアクセスする責任を負います。 1 つのアクセスが定義されています。ブラウザはデバイス上に存在する最高の機能を提供できるため、このデータに簡単にアクセスできます。

このデータには、ユーザーまたはデバイスの現在位置を知るための getCurrentPosition や、デバイスの位置が変更されるたびに役立つ watchPosition などのさまざまな方法と、クリアに役立つ ClearWatch などの別の方法を使用することで、効率的にアクセスできます。地理位置情報機能のすべての呼び出し。

この機能は、次のような一部のインターフェースで動作します:

Geolocation: これは、メインクラスの最も重要な API の 1 つであり、ユーザーの現在位置を取得したり、位置の変化を監視したりするのに役立ついくつかのメソッドが含まれています。
GeolocationPosition: これはユーザーの位置を定義するために使用されます。成功した呼び出しが地理位置情報のいずれかで識別されると、そのオブジェクトインスタンスと調整されます。
地理位置座標: これは、ユーザーの位置の座標を特定するのに役立ちます。
GeolocationPositionError: このインターフェイスは、呼び出しが失敗した場合に呼び出され、地理位置情報に含まれるメソッドに返されます。
地理位置情報: これは、地理位置情報オブジェクトのインスタンスが地理位置情報で呼び出される場合に便利です。したがって、ここから他のすべての機能にアクセスできます。

地理位置情報の方法+63

地理位置情報インターフェースで位置を定義するために、HTML 地理位置情報で使用されるメソッドは合計 3 つあります。それらは次のとおりです:

getCurrentPosition(): HTML 地理位置情報のこの基本メソッドは、デバイスまたはユーザーの現在の地理的位置と、地図上で返されるデータを検出するのに役立ちます。このメソッドは、成功、エラー、オプションなどのさまざまなパラメーターで機能します。
watchPosition(): ユーザーがデバイスの位置が変更された後に位置を確認したい場合は、変更されたデバイスの位置を確認するためにコーディング内でこれが呼び出されます。このメソッドは、不明なランダムエラーなどのエラーコールバック関数を呼び出します。指定された位置情報が利用できず、指定された要求された位置情報がタイムアウトになった場合、ユーザーは位置情報の共有を許可できません。
clearWatch(): HTML 地理位置情報のこのメソッドを使用して、進行中の watchPosition 呼び出しをキャンセルするだけでなく、前の 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 コード:

<!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 地理位置情報