こちらの記事を拝見し、レイヤーに登録したマーカーをまとめて非表示(iconMarkers)にする動作を知りました。
そこでこれに倣って以下のようなコードを書いたところ、非表示の動作をしません。ブラウザのコンソールにエラー出力もないです。
でall_markersの内容を出力するとオブジェクトの中に._layersがありここにそれぞれのマーカー関連のオブジェクトが格納されていたので、
$('.allClose').on('click',function(){
var keys = Object.keys(all_markers._layers);
for (var i = 0,count = keys.length; i < count; i++) {
map.removeLayer(all_markers._layers[keys[i]]);
}
})
とすると全て非表示にすることができました。
ただ記事を見てもループするようにはなんら言及がないですし、グーグル先生で検索したところレイヤーでループするような処理も見つけることができませんんでした、
本来はループさせずにAPIの標準的な昨日で全て非表示にできればいいのですが、なぜ記事のようにループさせずにマーカー非表示にできないのかわからなかったため、もしご存知の方がいればご教示ください。
よろしくお願い致します。
javascript
1var map; 2var all=[]; 3var all_markers = L.featureGroup(); 4 5map = L.map('map').setView([35.680552,139.766923],11); //defaultは東京駅中心 6var tileLayer =L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', 7 { 8 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>', 9 maxZoom: 25 10 }); 11 12tileLayer.addTo(map); 13 14var first =L.marker([35.639014,139.638741], 15{ 16 icon:L.icon({iconUrl:"./z_icon/1_k.png", 17 iconRetinaUrl:"./z_icon/'1_k.png", 18 iconSize: [45,45],iconAnchor:[25, 50],popupAnchor:[0,-40], 19 }) 20}).addTo(map).bindPopup('<p></p>'); 21all_markers.addLayer(first); 22 23var second =L.marker([35.631350,139.646900], 24{ 25 icon:L.icon({iconUrl:"./z_icon/1_k.png", 26 iconRetinaUrl:"./z_icon/'1_k.png", 27 iconSize: [45,45],iconAnchor:[25, 50],popupAnchor:[0,-40], 28 }) 29}).addTo(map).bindPopup('<p></p>'); 30all_markers.addLayer(second); 31 32$('.allClose').on('click',function(){ 33 map.removeLayer(all_markers); 34}
あなたの回答
tips
プレビュー