地理院地図でクリックされた位置の緯度経度を取得する

GoogleMapでクリックされた位置を取得する - なか日記を見て自分でできるかいなと思い、OpenLayersで地理院地図を表示してやってみました。

画面

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

コードサンプル

<!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>
         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);
         var markers = new OpenLayers.Layer.Markers("Markers");

         $(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);

            var marker = new OpenLayers.Marker(deflonlat);

            markers.addMarker(marker);
            map.addLayer(markers);

            map.events.register('click', map, onClick);

            function onClick(evt) {
               var lonlat = map.getLonLatFromViewPortPx(evt.xy);
               lonlat.transform(projection3857, projection4326);
               $("#lat").val(lonlat.lat);
               $("#lon").val(lonlat.lon);

               var opx = map.getLayerPxFromViewPortPx(evt.xy);
               marker.map = map;
               marker.moveTo(opx);
            }
         });
      </script>
   </head>
   <body>
      <input id="lat" type="text" value="" />
      <input id="lon" type="text" value="" />
      <div id="map"></div>
      </script>
   </body>
</html>

一応できたものの、緯度経度の取得もマーカーの移動もすぐにはできませんでした。やはり一般事務員ですね。

投影法の変更とかマーカーの配置・変更がGoogle Maps JavaScript API v3より面倒かもしれませんね…。
もっと簡単にできる方法あるのかなー。