为什么我的Leaflet弹出窗口会意外关闭？

Question

我有一个功能，允许用户查找标记并缩放到其位置，此时我希望弹出窗口打开。一切都正常工作，除了函数执行后弹出窗口会关闭。我无法确定是什么原因导致了弹出窗口关闭。

这里是问题的示例。如果我将元素“.lookFor”定位在地图div之外，则该功能可以正常工作；但是我需要该功能位于当前位置。它是Bootstrap选项卡界面的一部分，其中包含其他地图工具，位于全屏地图上。

以下是相关代码：

var geoJsonDataFeatures = {
"type": "FeatureCollection",
"features":[]
};

//create popup content
var htmlString = "<div>popup html goes here....</div>";
var popupContent = L.popup().setContent(htmlString);

//create geoJson object for each marker
var geoJsonData = {
"type": "Feature",
"id": siteNo, //a string saved as a variable 
"properties": {
    "popupContent": popupContent,
    "icon": icon //an L.icon object
    },
"geometry": {
    "type": "Point",
    "coordinates": [longitude, latitude] //strings saved as variables
    }
}

//push the geoJson feature into the features object
geoJsonDataFeatures.features.push(geoJsonData);

//create the map layer that holds the markers
var geoJsonDataLayer = L.geoJson(geoJsonDataFeatures, {
    onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.popupContent);
    layer.setIcon(feature.properties.icon);
    }
}).addTo(map);

....

//when the user has selected a site from a dropdown select menu,
//we pass the site number (siteNo) to a function to zoom and open the
//marker popup:

zoomOpenPopup(siteNo);

function zoomOpenPopup(siteNo){
var marker = {};
var popup = {};
var layerObj = {};

    if(map.hasLayer(geoJsonDataLayer))
    {
    layerObj = geoJsonDataLayer;
    }

    jQuery.each(layerObj._layers, function(k){

        if(siteNo == layerObj._layers[k].feature.id)
        {
        marker = layerObj._layers[k];
        popup = layerObj._layers[k].feature.properties.popupContent;
        }  
    });

marker.openPopup();
//popup._isOpen = true; //doesn't work
//popup.openOn(map); //doesn't work
//map.openPopup(popup); //doesn't work
 alert("done!"); 
}

当警报触发时，您可以在地图上看到弹出窗口，但一旦关闭警报，弹出窗口就会消失。我有一个函数，在打开页面时更新弹出窗口偏移量的位置，以便重置弹出窗口，如果先前调整大小以适应Bootstrap选项卡的内容，但即使我注释掉该函数并重新加载页面，仍然存在弹出窗口关闭的问题。以下是该函数：

//when a popup opens, set the default offset
map.on("popupopen",function(e){
e.popup.options.offset = L.point(0,-13);
e.popup._updatePosition();
jQuery(".leaflet-popup-content").css("width","301px");
});

有人遇到过类似的问题吗？

- Kathy

---

你有没有可能将这个发布到某个地方，以便我们可以看到整个流程？ - snkashis

当然！这里是一个范例：a fiddle。我认为问题可能与将元素".lookFor"放在地图顶部有关。对于我的实际网站，我将此元素放置在了 Bootstrap 标签界面内，以提供用户多个工具，并希望将此站点查找器工具包含在该元素中。 - Kathy

Answer 1

我相信你的动画 setView 作为 moveend 事件的一部分关闭了弹出窗口。

相反，尝试使用以下代码来处理按钮点击。它会等待 moveend 完全完成，然后准备弹出窗口。

jQuery("#lookForButton").click(function(){
    map.on('moveend', function(e) {
        zoomOpenPopup("11486990");
        map.off('moveend');
    });
    map.setView([42.1676459, -121.776391], 14);
});

- snkashis

---

snkashis - 我一直在尝试你的代码，但是遇到了一些问题。它在只有一个网站时运行得很好，但是当我添加更多网站时，遇到了相同的问题。请看这个fiddle。有什么想法吗？ - Kathy

我看了一下 - 看起来没问题。 - snkashis

看起来你的按钮控件也存在问题。在未来，使用L.Control代替尝试绝对定位一个元素在地图上方。试试这个fiddle，看看我的意思：http://jsfiddle.net/v5tq4668/。我还删除了你对私有_latLng的使用，改用.getLatLng()，并且使用了Leaflet的核心eachLayer函数，而不是jquery版本。 - snkashis

是的，我也尝试了同样的事情。这里有一个fiddle，使用自定义控件而不是绝对定位元素，但它不起作用。感谢您的帮助。 - Kathy

在 div.innerHTML = lookForHTML; 之后添加 L.DomEvent.disableClickPropagation(div);。点击事件会穿透到地图上。 - snkashis

谢谢！这个功能现在完美运作。非常感谢你抽出时间来帮助我！ - Kathy