デバイスの位置情報を取得できる「Geolocation API」
スマートフォンをはじめとする通信用端末にはGPSが搭載されています。このGPS機能が計測した現在地をJavaScriptで取得する方法を紹介します。
アクセス時点での現在地を取得しよう
以下のサンプルは、このページにアクセスした時点での現在地を取得します。18行目からのオプションには以下のプロパティを設定できます。
enableHighAccuracy: 高精度で現在地を取得するかどうか(true/false)を設定する。trueにすると高精度な現在地を取得できるが、取得までの時間がかかることと、バッテリー消費量が増加する。
timeout: 現在地を特定するまでの判定時間(ms)を設定する。設定した時間内に特定できなければエラーとなる。
maximumAge: 取得した現在地情報のキャッシュ時間(ms)を設定する。
enableHighAccuracy: 高精度で現在地を取得するかどうか(true/false)を設定する。trueにすると高精度な現在地を取得できるが、取得までの時間がかかることと、バッテリー消費量が増加する。
timeout: 現在地を特定するまでの判定時間(ms)を設定する。設定した時間内に特定できなければエラーとなる。
maximumAge: 取得した現在地情報のキャッシュ時間(ms)を設定する。
<!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>
リアルタイムに現在地を取得しよう
<!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>
参考
執筆者Writer
AnTytle
コメントComment