Geolocation API

位置情報を取り出すサンプル 3

　エラーを表示させたい場合は、位置情報の許可を求めてきたときに「拒否(ブロック)」してみてください。エラー・メッセージとエラー・コードが表示されると思います。

緯度
-
経度
-

Explanation

「クイック・スタート」で使った「サンプル」を改良して、位置情報取得のエラー・ハンドリングを加えています。

　位置情報も個人情報の一部という考え方から、ページにアクセスすると同時に位置情報を取得するシステムは好ましくないようです。このページでもボタンを設置し、このボタンを押すとブラウザから位置情報を取得していいか聞かれますので、「OK」にしてください。手間がかかりますが個人情報保護の観点からは致し方のない事だと考えています。

詳しくはこちら＞＞　現在位置を取得する

Sample source for this page


<!DOCTYPE html>
<html lang="ja">
<head>
	<title>位置情報を取り出すサンプル 3</title>
	<script>
		function geoapi () {
			// 現在位置情報を取得
			navigator.geolocation.getCurrentPosition(
				// 位置情報取得成功時に実行されるコールバック
				showLocation,
				// 位置情報取得失敗時に実行されるコールバック
				showError
			);
			
			// 位置情報取得成功時の処理
			function showLocation(position) {
				console.log(position);
				
				// 緯度
				var gllatitude = position.coords.latitude;
				document.getElementById("resultLatitude").innerHTML = gllatitude;
				
				// 経度
				var gllongitude = position.coords.longitude;
				document.getElementById("resultLongitude").innerHTML = gllongitude;
			}
			
			// 位置情報取得失敗時の処理
			function showError(position) {
				alert(position.message + "(" + position.code + ")");
			}
		}
	</script>
</head>

<body>
	<p><input type="button" value="位置情報の取得" onclick="geoapi()"></p>
	<dl>
		<dt>緯度</dt>
		<dd id="resultLatitude">-</dd>
	
		<dt>経度</dt>
		<dd id="resultLongitude">-</dd>
	</dl>
</body>
</html>