地理院地図で現在地を取得する
地理院地図でクリックされた位置の緯度経度を取得する - えぢた 2.2 @k_zoarと地理院地図で地図のズームレベルを取得する - えぢた 2.2 @k_zoarの続き。
ジオコーディングはGoogleを使わない方法が大変そうなので後回しにすることにしました。
今回はHTML5のGeoLocationを利用して現在地を取得します。
初期表示はズームレベル17で埼玉県庁が表示されていて、現在地はズームレベル18となるようにしましてあります。
初期表示
現在地の表示
コードサンプル
特に意味はありませんが、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に変更すると連続して現在地を取得し続けるらしいです。この辺は機会を見て後でできたらなぁと妄想しています。
…タスクだけ積み上がってるような。