地理院地図でクリックされた位置の緯度経度を取得する
GoogleMapでクリックされた位置を取得する - なか日記を見て自分でできるかいなと思い、OpenLayersで地理院地図を表示してやってみました。
画面
コードサンプル
<!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より面倒かもしれませんね…。
もっと簡単にできる方法あるのかなー。