読者です 読者をやめる 読者になる 読者になる

minofoto and miscellaneous notes

個人的な備忘録ですが、たまに広く読んでもらいたい記事を書くこともあります。記事は随時修正したり追記したりすることがあります。

現在位置表示ができそう

OSM

OpenLayers を使って iPhone 用の飲食店マップを作ってみた - minofoto and miscellaneous notes に書いたように、地図を作るのにハマっています。
この時分からなかったので、「まだ足りないこと」として

現在位置を表示する機能

スマートフォンGPS を元に現在位置が表示できると、土地勘のない会議参加者用のランチマップとしてはかなり使い勝手が良くなるはずですね。

と書いたのですが、これが案外簡単にできそうです。
第3回 位置情報を取得してみよう(後編):位置情報サービスのはじめ方|gihyo.jp … 技術評論社
の記事を参考にして、こんなコードを書きました。

    function currentPos() {
      if (navigator.geolocation) {  // 現在の位置情報を取得
        navigator.geolocation.getCurrentPosition(
          function (pos) {      // (1)位置情報の取得に成功した場合
            centLonLat = new OpenLayers.LonLat(pos.coords.longitude, pos.coords.latitude)
                       .transform(
                          new OpenLayers.Projection("EPSG:4326"),
                          new OpenLayers.Projection("EPSG:900913")
                       );
            map.setCenter(centLonLat);
          },
          function (error) {    // (2)位置情報の取得に失敗した場合
            var message = "";
            switch (error.code) {
              case error.POSITION_UNAVAILABLE:      // 位置情報が取得できない場合
                message = "位置情報の取得ができませんでした。";
                break;
              case error.PERMISSION_DENIED:         // Geolocationの使用が許可されない場合
                message = "位置情報取得の使用許可がされませんでした。";
                break;
              case error.PERMISSION_DENIED_TIMEOUT:     // タイムアウトした場合
                message = "位置情報取得中にタイムアウトしました。";
                break;
            }
            window.alert(message);
          }
        );
      } else {
        window.alert("本ブラウザではGeolocationが使えません");
      }
    }

これを使って、東中野〜中野ひとり飲みマップ も近々更新してみます。

  • 追記

コードを表示すると、画面サイズによっては右が切れてしまうようです。ブラウザのズーム機能(FireFox なら control-wheel など)で、表示を縮小すると右の端まで見えますので、必要ならお試しください。