HTML でユーザーの位置を特定するにはどうすればよいですか?

ユーザーの現在位置を見つけて、Web ページ上に位置座標を表示したり、地図上に位置を表示したりすることがタスクになる場合があります。この記事では、HTML と JavaScript コードを使用して、HTML ページ内のユーザーの現在位置を取得するプロセスを説明します。 2 つの異なる例を使用して説明します。最初の例では、ユーザーの現在位置を取得し、その位置座標を HTML ページに表示できます。 2 番目の例では、オープン ソースの Leaflet マップ ライブラリを使用して、ユーザーの現在位置を取得し、マップ上に表示します。

例 1: ユーザーの現在位置を検索し、その位置座標を HTML ページに表示します。

コードの説明と設計手順 −

ステップ1 -HTMLファイルを作成し、コードの記述を開始します。

ステップ 2 - ラベル

を作成し、位置座標を表示するように設定します。

ステップ 3 - ボタンを作成し、ボタンがクリックされたときに関数 getYourLoc() を呼び出します。

ステップ 4 - <script> タグにコードを記述し、2 つの関数 getYourLoc() と showMyPos(pos) を作成します。 </script>

ステップ5 - getYourLoc() にJavaScriptコードを記述して、navigator.geolocation.getCurrentPosition()を使用して現在の位置を検索し、showMyPos(pos)を呼び出します。

ステップ 6 - showMyPos(pos) を使用して、前に作成した

タグに位置を追加します。テスト結果。

使用される重要なファイル − locationfile.html

Code ForparentFolderFile.html:

の中国語訳は次のとおりです。

parentFolderFile.html:

のコード リーリー

結果の表示

結果を確認するには、ブラウザで loactionfile.html ファイルを開きます。次に、ボタンをクリックしてユーザーの現在位置を見つけます。座標は HTML ページに表示されます。

例 2: ユーザーの現在位置を検索し、地図上に位置座標を表示します。

コードの説明と設計手順 −

ステップ1 -HTMLファイルを作成し、コードの記述を開始します。

ステップ 2 - ラベル

を作成し、位置座標を表示するように設定します。

ステップ 3 - ボタンを作成し、ボタンがクリックされたときに関数 getYourLoc() を呼び出します。

ステップ 4 - <script> タグ内にコードを記述し、3 つの関数 getYourLoc() 、 showMyPos(pos) 、および showmap(pos) を作成します。 </script>

ステップ 5

-getYourLoc() に JavaScript コードを記述して、navigator.geolocation.getCurrentPosition() を使用して現在の位置を検索し、関数 showMyPos(pos) と showmap(pos) の両方を呼び出します。

ステップ 6

- 関数 showmap(pos) で地図を表示する場合、リーフレット ライブラリを組み込み、ベース マップを使用し、マーカーを設定して、地図の位置をマークするための現在の位置座標を渡します。

ステップ 7

- showMyPos(pos) を使用して、前に作成した タグに場所を追加します。地図も表示します。テスト結果。

使用される重要なファイル

- locationfile11.html locationfile11.html のコード:

リーリー

結果の表示

結果を確認するには、ブラウザで loactionfile11.html を開きます。ボタンをクリックして、ユーザーの現在位置を見つけます。座標が表示され、地図上にマークされます。

この HTML 記事では、2 つの異なる例を使用して、ユーザーの現在位置を見つける方法を示します。まず、位置を取得した後にその位置座標をページ上に表示する方法を紹介し、その後、HTMLページに位置を表示しながら、その座標を利用して地図上に表示する方法を紹介します。

以上がHTML でユーザーの位置を特定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。