@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

Geolocation APIで現在地を連続的に取得する

html5

前回（Geolocation APIで現在地を取得する - @thorikiriのてょりっき）は現在地の取得を一発行うことをやりましたので、今回は連続的に取得してみたいと思います。
モバイルでは、移動中の場所を知りたい欲求にかられると思いますし、移動しながらある一定の範囲に入ったことを知りたいとか、進んだ経路をプロットしたいとかあるんじゃないでしょうか。
連続的に取得するのは、navigator.geolocation.watchPosition(onSuccess, onError [, option])を使います。getCurrentPositionと基本はかわりません。

navigator.geolocation.watchPosition(function(position) {
    document.getElementById('message').innerHTML = 'You are at ' + position.coords.latitude + ', ' + position.coords.longitude + ' now';
}, function(e) {
    document.getElementById('message').innerHTML = typeof e == 'string' ? e : e.message;
});

連続的に取得するのをやめるには、clearWatchを使います。使い方はsetInterval()と同様と思ってもらえば問題ないかと思います。watchPositionの戻り値をclearWatchの引数にするだけですね。
サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Location API Sample</title>
  </head>
  <body>
    <h1>Location API Sample</h1>
    <div id="message"></div>
    <div>
      <button id="stop">STOP</button>
    </div>
    <script>
      var watch;
      window.onload = function() {
          if (navigator.geolocation) {
              watch = navigator.geolocation.watchPosition(function(position) {
                  document.getElementById('message').innerHTML = 'You are at ' + position.coords.latitude + ', ' + position.coords.longitude + ' now';
              }, function(e) {
                  document.getElementById('message').innerHTML = e.message;
              });
          } else {
              document.getElementById('message').innerHTML = 'Location APIがサポートされていません。';
          }
      };
      document.getElementById('stop').onclick = function() {
    	  navigator.geolocation.clearWatch(watch);
    	  document.getElementById('message').innerHTML = 'STOP!!';
      };
    </script>
  </body>
</html>

HTML5ガイドブック 増補改訂版 (Google Expert Series)

HTML5ガイドブック 増補改訂版 (Google Expert Series)