スマートフォンをはじめとする通信用端末にはGPSが搭載されています。このGPS機能が計測した現在地をJavaScriptで取得する方法を紹介します。
以下のサンプルは、このページにアクセスした時点での現在地を取得します。18行目からのオプションには以下のプロパティを設定できます。
enableHighAccuracy: 高精度で現在地を取得するかどうか(true/false)を設定する。trueにすると高精度な現在地を取得できるが、取得までの時間がかかることと、バッテリー消費量が増加する。
timeout: 現在地を特定するまでの判定時間(ms)を設定する。設定した時間内に特定できなければエラーとなる。
maximumAge: 取得した現在地情報のキャッシュ時間(ms)を設定する。
23行目のgetCurrentPositionが味噌で、ページにアクセスしてきた時点での情報を取得します。引数は3つでgetCurrentPosition(成功時, 失敗時, オプション)の順番でセットします。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>デバイスのGPSで現在地を取得するサンプル</title>
<ul>
<li>緯度:<span id="lat"></span>°
<li>経度:<span id="lon"></span>°
<li>高度:<span id="alt"></span>m
<li>座標精度:<span id="accuracy"></span>m
<li>高度精度:<span id="altAccuracy"></span>m
<li>方位:<span id="head"></span>°
<li>速度:<span id="speed"></span>m/s
<li>標準時:<span id="time"></span>
</ul>
<script>
var options = {
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 0
}
navigator.geolocation.getCurrentPosition(done, function(){alert('失敗')}, options);
function done(position){
document.getElementById('lat').innerHTML = position.coords.latitude;
document.getElementById('lon').innerHTML = position.coords.longitude;
document.getElementById('alt').innerHTML = position.coords.altitude;
document.getElementById('accuracy').innerHTML = position.coords.accuracy;
document.getElementById('altAccuracy').innerHTML = position.coords.altitudeAccuracy;
document.getElementById('head').innerHTML = position.coords.heading;
document.getElementById('speed').innerHTML = position.coords.speed;
document.getElementById('time').innerHTML = new Date(position.timestamp);
}
</script>
以下のサンプルは、移動している間も常時現在地を取得し続けます。上のサンプルとの違いは23行目のwatchPositionだけです。このメソッドを設定すると現在地が変化するたびに情報を取得します。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>デバイスのGPSで現在地を取得するサンプル</title>
<ul>
<li>緯度:<span id="lat"></span>°
<li>経度:<span id="lon"></span>°
<li>高度:<span id="alt"></span>m
<li>座標精度:<span id="accuracy"></span>m
<li>高度精度:<span id="altAccuracy"></span>m
<li>方位:<span id="head"></span>°
<li>速度:<span id="speed"></span>m/s
<li>標準時:<span id="time"></span>
</ul>
<script>
var options = {
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 0
}
navigator.geolocation.watchPosition(done, function(){alert('失敗')}, options);
function done(position){
document.getElementById('lat').innerHTML = position.coords.latitude;
document.getElementById('lon').innerHTML = position.coords.longitude;
document.getElementById('alt').innerHTML = position.coords.altitude;
document.getElementById('accuracy').innerHTML = position.coords.accuracy;
document.getElementById('altAccuracy').innerHTML = position.coords.altitudeAccuracy;
document.getElementById('head').innerHTML = position.coords.heading;
document.getElementById('speed').innerHTML = position.coords.speed;
document.getElementById('time').innerHTML = new Date(position.timestamp);
}
</script>
