Kat*_*thy 6 javascript jquery popup leaflet
我有一个功能,允许用户查找标记并缩放到其位置,此时我希望打开弹出窗口。一切工作正常,除了弹出窗口在函数触发后关闭之外。我不明白是什么让弹出窗口关闭。
这是这个问题的一个小问题。如果我采用元素“.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!");
}
Run Code Online (Sandbox Code Playgroud)
当警报触发时,您可以看到弹出窗口在地图上打开,但是一旦警报关闭,弹出窗口就会消失。我确实有一个函数,可以更新打开时弹出窗口偏移的位置,以重置弹出窗口(如果之前调整了弹出窗口的大小以适合 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");
});
Run Code Online (Sandbox Code Playgroud)
有人遇到过类似的事情吗?
我相信您的动画setView正在关闭弹出窗口作为moveend事件的一部分。
相反,尝试使用此代码进行按钮单击。它会等到moveend完全完成,然后准备弹出窗口。
jQuery("#lookForButton").click(function(){
map.on('moveend', function(e) {
zoomOpenPopup("11486990");
map.off('moveend');
});
map.setView([42.1676459, -121.776391], 14);
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3117 次 |
| 最近记录: |