Geolocation API で取得できるプロパティを列挙しています。ただし、取得できなかった値は表示されていません。
位置情報も個人情報の一部という考え方から、ページにアクセスすると同時に位置情報を取得するシステムは好ましくないようです。このページでもボタンを設置し、このボタンを押すとブラウザから位置情報を取得していいか聞かれますので、「OK」にしてください。手間がかかりますが個人情報保護の観点からは致し方のない事だと考えています。
詳しくはこちら＞＞ 現在位置を取得する
<!DOCTYPE html>
<html lang="ja">
<head>
<title>位置情報を取り出すサンプル</title>
<script>
function geoApi () {
// 現在位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback);
// 位置情報取得完了時の処理
function successCallback(position) {
// 動作と取得データの確認用コンソールログ
console.log(position);
// 緯度
var gllatitude = position.coords.latitude;
document.getElementById("resultLatitude").innerHTML = gllatitude;
// 経度
var gllongitude = position.coords.longitude;
document.getElementById("resultLongitude").innerHTML = gllongitude;
// 緯度・経度の精度
var glaccuracy = position.coords.accuracy;
document.getElementById("resultAccuracy").innerHTML = glaccuracy;
// GPS 高度
var glaltitude = position.coords.altitude;
document.getElementById("resultAltitude").innerHTML = glaltitude;
// GPS 高度の精度
var glaltitudeAccuracy = position.coords.altitudeAccuracy;
document.getElementById("resultAltitudeAccuracy").innerHTML = glaltitudeAccuracy;
// 移動方向
var glheading = position.coords.heading;
document.getElementById("resultHeading").innerHTML = glheading;
// 移動速度
var glspeed = position.coords.speed;
document.getElementById("resultSpeed").innerHTML = glspeed;
// タイムスタンプ
var gltimestamp = position.timestamp;
if( typeof(gltimestamp) == "number" ) {
gltimestamp = new Date(gltimestamp);
}
document.getElementById("resultTimestamp").innerHTML = gltimestamp;
}
}
</script>
</head>
<body>
<p><input type="button" value="位置情報の取得" onclick="geoApi()"></p>
<dl>
<dt>緯度</dt>
<dd id="resultLatitude">-</dd>
<dt>経度</dt>
<dd id="resultLongitude">-</dd>
<dt>緯度・経度の精度</dt>
<dd id="resultAccuracy">-</dd>
<dt>GPS 高度</dt>
<dd id="resultAltitude">-</dd>
<dt>GPS 高度の精度</dt>
<dd id="resultAltitudeAccuracy">-</dd>
<dt>移動方向</dt>
<dd id="resultHeading">-</dd>
<dt>移動速度</dt>
<dd id="resultSpeed">-</dd>
<dt>タイムスタンプ</dt>
<dd id="resultTimestamp">-</dd>
</dl>
</body>
</html>