Question

我制作了带有标记的传单地图。点击标记后，会打开一个弹出窗口。我添加了一个搜索栏，使标记可以搜索。选择标记名称后，地图将缩放到标记，并且应打开一个弹出窗口。

我的问题：每个弹出窗口只能打开一次，只有缩放才能在选择标记时起作用，弹出窗口不会打开。如果已单击，则第二次单击不会打开弹出窗口。我认为这是因为函数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 &copy; Esri &mdash; 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;
    }
}
}

Answer 1

查看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();
});

问题：弹出窗口无法打开两次

1 个答案: