2017-02-13 16 views
1

マーカー付きのリーフレットマップを作成しました。マーカーをクリックすると、ポップアップが開きます。マーカーを検索可能にするための検索バーを追加しました。マーカー名が選択されると、マップはマーカーにズームし、ポップアップが開きます。問題:ポップアップを2回開くことができません

私の問題:すべてのポップアップは一度しか開くことができず、マーカーが選択されているときにはズームのみが機能し、ポップアップは開きません。すでにクリックされている場合は、2回目のクリックでポップアップが開きません。関数changeSelectionに間違いがあるからだと思いますが、実際には分かりません。提案はありますか?

地図はGitHubでホストされています。そして、地図hereを使って私の問題をチェックすることができます。 これは私のjsコードです:

function myFunction() { 
    var map = L.map('map').setView([51.426002, 7.503215], 8); 
    // improve experience on mobile 
    if (map.tap) map.tap.disable(); 
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', { 
    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', 
    maxZoom: 16 
}).addTo(map); 
    map._layersMinZoom=8; 

var selectedRadio = 0; 

var RadioByName = {}; 

    var markersLayer = new L.LayerGroup(); //layer contain searched elements 

    map.addLayer(markersLayer); 
    var controlSearch = new L.Control.Search({ 
    position:'topright',  
    layer: markersLayer, 
    initial: false, 
    zoom: 12, 
    marker: false, 
    textPlaceholder: 'Suche...' 
    }); 
    map.addControl(controlSearch); 

    // create newsroom markers 
var radioMarkers = []; 

var icon = L.icon({ 
      iconUrl: 'icons/icon.png', 
      iconSize:  [30, 32], // size of the icon 
      iconAnchor: [15, 32], // point of the icon which will correspond to marker's location 
      popupAnchor: [0, -32] 
      }); 

for(i=0; i<radio.length; i++) { 
    RadioByName[radio[i].redaktion] = radio[i]; 

    var radio_marker = []; 

    radio_marker.redaktion = radio[i].redaktion; // associate marker with newsroom 
    radio_marker.lat = radio[i].lat; 
    radio_marker.long = radio[i].long; 
    radio_marker.stadt = radio[i].stadt; 
    radio_marker.redaktion_link = radio[i].redaktion_link; 

    var title = radio_marker.redaktion, //value searched 
     loc = [radio_marker.long, radio_marker.lat], //position found 
     radio_marker = new L.marker(new L.latLng(loc), { 
      icon: icon, 
      title: title, 
      stadt: radio_marker.stadt, 
      redaktion_link: radio_marker.redaktion_link 
     }); 

    markersLayer.addLayer(radio_marker); 


    radio_marker.on('click', function(e) { 
     changeSelection(e.target.options.title); 
     map.setView([e.target._latlng.lat, e.target._latlng.lng]); 

     var myPopup = L.popup() 
     .setContent("<strong>" + e.target.options.redaktion_link + "</strong> | " + 
      e.target.options.stadt); 
      e.target.bindPopup(myPopup).openPopup(); 
    }); 

    radioMarkers.push(radio_marker); // keep marker reference for later 
} 

function changeSelection(radioRedaktion) { 
    if(selectedRadio == 0 || selectedRadio != radioRedaktion) { 
     selectedRadio = radioRedaktion; 

     for(i=0; i<radioMarkers.length; i++) { 
      if(radioMarkers[i].options.title == radioRedaktion) { 
       radioMarkers[i].openPopup();      
      } 
     }   
    } 
    else { 
     selectedRadio = 0; 
    } 
} 
} 

答えて

2

bindPopupのソースを見ると、ポップアップがすでにバインドされている場合、bindPopupへの後続の呼び出しは無駄になると思われます。

あなたのクリックハンドラは、あまりにも、unbindPopupへの呼び出しを含める必要があります。

radio_marker.on('click', function(e) { 

    changeSelection(e.target.options.title); 
    map.setView([e.target._latlng.lat, e.target._latlng.lng]); 

    var myPopup = L.popup().setContent(
    "<strong>" + 
    e.target.options.redaktion_link + 
    "</strong> | " + 
    e.target.options.stadt 
); 
    e.target 
    .unbindPopup() 
    .bindPopup(myPopup) 
    .openPopup(); 
}); 
+0

はあなたの、高速、シンプルかつ十分に記載の答えをありがとうございました!完璧に動作し、ポップアップがどのように機能するかを学びました!あなたのような人々が私がこのコミュニティをとても愛している理由です!あなたは私の2番目の質問の提案もありますか?検索バーでマーカーを検索すると、マップを選択したマーカーにズームするだけでなく、ポップアップを開くこともできます。私はあなたが下のコードで見たようにしてみましたが、うまくいきません。 –

+0

入手済み:http://stackoverflow.com/questions/23069012/leaflet-control-search-open-popup-for-search-result/23080891#23080891 –

関連する問題