MEMORVA

JavaScript でスマホの位置情報(GPS)、緯度・経度を取得する

更新:

JavaScript でスマホの位置情報(GPS)、緯度・経度を取得する。現在地の表示。geolocation.getCurrentPosition、watchPosition。
対象 : Android Chrome、iOS(iPhone、iPod touch)Safari

getCurrentPosition - 緯度・経度を取得

スマホの位置(GPS)情報は JavaScript で簡単に取得できる。
ただし、2016年12月現在最新版のChromeやSafariではSSL(https)通信でないと位置情報を取得できない。
古いブラウザはhttpでも取得できた。

<div id="ex_gps"></div>

<script>
window.addEventListener('DOMContentLoaded', function(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(successFunc, errorFunc);
   }else{
      document.getElementById('ex_gps').insertAdjacentHTML('afterbegin', 'エラー:geolocationを取得できません。');
   }
}, false);

function successFunc(position){
   var crd = position.coords;

   var text = "緯度 latitude:" + crd.latitude + "<br />"
      + "経度 longitude:" + crd.longitude + "<br />"
      + "高度 altitude:" + crd.altitude + "<br />"
      + "水平方向の誤差 accuracy:" + crd.accuracy + "<br />"
      + "垂直方向の誤差 altitudeAccuracy:" + crd.altitudeAccuracy + "<br />"
      + "方向 heading:" + crd.heading + "<br />"
      + "速度 speed:" + crd.speed
      ;

   document.getElementById('ex_gps').innerHTML = text;
}

function errorFunc(error){
   document.getElementById('ex_gps').innerHTML = "エラーコード:" + error.code + "<br />エラー内容:" + error.message;
}
</script>

このサンプルコードは、getCurrentPositionで位置情報を取得できたらsuccessFunc関数、エラーの場合はerrorFunc関数を実行している。
取得できる情報は以下の通り。

  • latitude : 緯度
  • longitude : 経度
  • altitude : 高度
  • accuracy : 水平方向の誤差
  • altitudeAccuracy : 垂直方向の誤差
  • heading : 方向
  • speed : 速度

取得できる情報はデバイスしだいで、取得できない場合は null になる。
基本的にGPS内蔵のスマホであれば緯度と経度は取得できる。
GPSを内蔵していないデバイスでは、ブラウザがIPアドレスなどをもとに大まかな位置情報を表示する場合もある。
Googleマップを使えば現在地を表示することもできる。
GoogleマップのAPIはいろいろあるが、通常の地図検索と同様クエリ(q)に緯度、経度をカンマで区切った値(35.658611,139.745556 など)を付けて検索するとその場所が表示される。


watchPosition - 位置情報を定期的に取得

前述の getCurrentPosition は位置情報を1度だけ取得するが、watchPosition はデバイスの位置が変化するたびに位置情報を取得してくれる。
よって setInterval 等は使わなくても良い。
前述のコードの getCurrentPosition を watchPosition に変えるだけで良い。

window.addEventListener('load', function(){
   if(navigator.geolocation){
      navigator.geolocation.watchPosition(successFunc, errorFunc);
   }else{
      document.getElementById('ex_gps').insertAdjacentHTML('afterbegin', 'エラー:geolocationを取得できません。');
   }
}, false);

successFunc関数では、一度位置情報を表示するだけなら insertAdjacentHTML で良いが、情報を更新できるように予め innerHTML を使用している。
位置情報の詳しい話は Mozilla Developer Network(MDN)の Geolocation に書かれている。