地理院地図で現在地を取得する

地理院地図でクリックされた位置の緯度経度を取得する - えぢた 2.2 @k_zoarと地理院地図で地図のズームレベルを取得する - えぢた 2.2 @k_zoarの続き。
ジオコーディングはGoogleを使わない方法が大変そうなので後回しにすることにしました。

今回はHTML5のGeoLocationを利用して現在地を取得します。
初期表示はズームレベル17で埼玉県庁が表示されていて、現在地はズームレベル18となるようにしましてあります。

初期表示

f:id:k-side:20140808144355p:plain

現在地の表示

f:id:k-side:20140808144356p:plain

コードサンプル

特に意味はありませんが、JavaScriptを別ファイルにしています。
index3.html

<!DOCTYPE html>
<html>
   <head>
      <title>現在地の位置情報を取得する</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta charset="utf-8" />
      <style>
         html, body, #map {
            height: 500px;
            width:  500px;
            margin:  20px;
            padding: 20px;
         }

         /* 国土地理院著作権表示 */
         div.olControlAttribution {
            padding: 3px;
            color:#000;
            background-color:#fff;
            background-color:rgba(230,255,255,0.7);
            font-size:12px;
            bottom:5px;
            vertical-align: middle;
         }

      </style>
      <script src="./jquery-2.1.1.min.js"></script>
      <script src="./OpenLayers/OpenLayers.js"></script>
      <script src="./geo.js"></script>
      <script>
         var map;
         var projection3857 = new OpenLayers.Projection("EPSG:3857");
         var projection4326 = new OpenLayers.Projection("EPSG:4326");
         var deflonlat = new OpenLayers.LonLat(139.6489569, 35.8574244).transform(projection4326, projection3857);

         $(function () {
            map = new OpenLayers.Map({
               div: "map",
               projection: projection3857,
               displayProjection: projection4326
            });

            map.addLayer(new OpenLayers.Layer.XYZ("標準地図",
                     "http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", {
                        attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html'>国土地理院</a>",
                        maxZoomLevel: 18
                     }));

            map.setCenter(deflonlat, 17);
            })
      </script>
   </head>
   <body>
      <button id="here">現在地の表示</button>
      <div id="map"></div>
      </script>
   </body>
</html>

geo.js

$(document).ready(function () {
   $("#here").click(function () {
      if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(
            success,
            error
            );
      } else {
         alert("Geolocationがサポートされていません")
        }
   });

   function success(p) {
      var lat = p.coords.latitude;
      var lon = p.coords.longitude;

      map.setCenter(
         new OpenLayers.LonLat(lon, lat).transform(projection4326, projection3857),
         18
         )
     }

   function error(p) {
      alert(p.message + "(" + p.code + ")");
   }
});

navigator.geolocation.getCurrentPositionの部分をnavigator.geolocation.watchPositionに変更すると連続して現在地を取得し続けるらしいです。この辺は機会を見て後でできたらなぁと妄想しています。
…タスクだけ積み上がってるような。