地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。
今回、Leaflet地図に2つの機能を追加する方法。
【オープン時に現在地を表示をする】
≪プログラムソース≫
現在地にマーカーを表示するようにした。
<style> .center-icon { width: 12px !important; height: 12px !important; border-radius: 12px; border: 3px solid #fdfdfd; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); background-color: #1E90FF; } </style> <script> function onLocationFound(e) { var centerIcon = L.divIcon({ className: 'center-icon', iconAnchor: [8, 8] }); L.marker(e.latlng, {icon: centerIcon}).addTo(map); } function onLocationError(e) { alert('位置情報を取得できませんでした。' + e.message); } map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); map.locate({setView: true, maxZoom: 16, timeout: 20000}); </script>
【地点名、住所検索機能】
Geocoderを使う。今回使ったのは以下。JavaScriptとCSSを読み込む。
<script src="//rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.js"></script> <link rel="stylesheet" href="//rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.css">
≪プログラムソース≫
検索された地点にマーカーを表示するようにした。
<style> .found-icon { width: 12px !important; height: 12px !important; border-radius: 12px; border: 3px solid #fdfdfd; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); background-color: #FF8C00; } </style> <script> var osmGeocoder = new L.Control.OSMGeocoder({ collapsed: false, text: '検索', placeholder: '住所を入力してください。', callback: function (results) { var coords = L.latLng(results[0].lat,results[0].lon); var foundIcon = L.divIcon({ className: 'found-icon', iconAnchor: [8, 8] }); L.marker(coords, {icon: foundIcon}).addTo(map); map.setView(coords,17); } }); </script>