ブラウザの位置情報をhtmlに表示する方法
ヘッダに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script> // geolocationを利用できるか確認 if
(navigator.geolocation)
{
//現在位置を取得する
navigator.geolocation
.getCurrentPosition(success,error,options);
var
options
=
{
// enableHighAccuracyは、GPSの精度でtrueかfalseをセットする
// trueだと精度が高くなる
enableHighAccuracy:
true,
//timeoutは、タイムアウト時間でミリ秒単位
timeout:
1000,
// maximumAgeは、キャッシュ有効時間でミリ秒で表す
// 0の場合、常に最新の情報を取得する
maximumAge:
0
};
// 成功時
function
success(position)
{
var
crd
=
position.coords; var
target
=
document.getElementById("btn-a");
// Positionオブジェクトの中にあるcoordsオブジェクトの
// latitudeとlongitudeプロパティを参照
document.getElementById("ido")
.textContent
=
"経度 : "
+
crd.latitude;
document.getElementById("keido")
.textContent
=
"緯度 : "
+
crd.longitude;
document.getElementById("idokeido")
.textContent
=
+
crd.latitude
+","
+
crd.longitude; target.href
=
"https://www.google.co.jp/maps/place/"
+
crd.latitude
+","
+
crd.longitude;
;
};
// 失敗時
function
error(err)
{
// PositionErrorオブジェクトの
// codeとmessageプロパティを参照
document.getElementById("ido").textContent
=
"エラーコード : "
+
err.code;
document.getElementById("keido").textContent
=
"エラーメッセージ : "
+
err.message;
}; }
else
{ document.getElementById("test1").textContent
=
"このブラウザではGeolocationの使用はできません"; } </script> |
そして
書きたい場所に
|
1 2 |
<p
id="ido"></p> <p
id="keido"></p> |
と書けば、
↓↓↓↓↓↓↓↓
グーグルマップで見るときは
↓↓↓↓↓↓↓↓
↑↑↑↑↑↑↑↑をコピ－して検索欄に貼り付ける
ボタンを作るときは、
|
1 |
<a
id="btn-a"
href=""
target="_blank"
class="button-a"
rel="noopener">グーグルマップで開く</a> |
