a-go-go.com

主に動作確認用。いろいろ実験&ひとりごと

外字一覧
旧字一覧
Sara
Line
blog

ブラウザの位置情報をhtmlに表示する方法

ヘッダに

<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>

そして
書きたい場所に

<p id="ido"></p>
<p id="keido"></p>

と書けば、

↓↓↓↓↓↓↓↓

グーグルマップで見るときは
↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑をコピ-して検索欄に貼り付ける

ボタンを作るときは、

 <a id="btn-a" href="" target="_blank" class="button-a" rel="noopener">グーグルマップで開く</a>

コメント

この記事へのコメントはありません。

関連記事

blog

Archive

  1. サックス運指

  2. カタカナにする文字起こし

  3. 厄年・九曜星

  4. 単に数字を置換するだけ(月)

  5. 『crysti32.ocx』またはその依存関係のひとつが適切に登録されていません。

  6. 改行コードを消す!には

  7. ペーストした画像をワードプレスに投稿する⇒プラグイン不要

  8. Lineのスタンプ

  9. VisualStudio2023 コントロールのプロパティが表示されない

PAGE TOP