从 OpenLayers 功能中删除所有弹出窗口

Question

我正在使用 OpenLayers 创建地图并绘制位置。每个位置都有一个标记和一个弹出窗口，并且是使用 OpenLayers.Feature 创建的 - 目前，我绝对不在我的舒适区之外，所以我将示例代码拼凑在一起。

一个标记的创建如下（为了简洁起见，我已经砍掉了我希望是明显的变量分配）：

function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow, type)
{
    var feature = new OpenLayers.Feature(markerLayer, ll);  
    feature.closeBox = closeBox;
    feature.popupClass = popupClass;
    feature.data.icon = icon;
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = (overflow) ? "auto" : "hidden";

    var marker = feature.createMarker();
    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
    }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };

    marker.events.register("mousedown", feature, markerClick);
    markerLayer.addMarker(marker);
}

地图可以包含许多标记。

单击标记时，弹出窗口会打开和关闭。我想要做的是，当单击一个新标记并打开一个弹出窗口时，关闭与地图上所有标记相关的所有弹出窗口 - 也就是说，我一次只希望显示一个弹出窗口。

可能是我的方法全错了，但希望得到指点，即使只是尝试的想法。

Answer 1

如果您实施了一个解决方案，而一次只有一个弹出窗口处于活动状态（即每次取消选择弹出窗口时它都会消失），那么您一次永远不会有多个弹出窗口。

阅读this STACKOVERFLOW 答案，我正是为这个问题写的。你有所有必要的伪代码（对所有内容都有冗长的解释）。

如果您不需要解释，这显示了解决方案：

var urlKML = 'parseKMLTrack07d.php';         
var layerKML = new OpenLayers.Layer.Vector("KML1", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: urlKML,
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });

var layerOSM = new OpenLayers.Layer.OSM();
var map = new OpenLayers.Map({
    div: "map",
    layers: [
        layerOSM,
        layerKML 
    ]
});

var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
layerKML.events.on({
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect
        });
map.addControl(selectStop);
selectStop.activate();

function onFeatureSelect(event) {
    var feature = event.feature;
    var content = feature.attributes.name + '<br/>'+feature.attributes.description;
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
                             feature.geometry.getBounds().getCenterLonLat(),
                             new OpenLayers.Size(100,100),
                             content,
                             null, true, onFeatureUnselect);
    feature.popup = popup;
    map.addPopup(popup);
    // GLOBAL variable, in case popup is destroyed by clicking CLOSE box
    lastfeature = feature;
}
function onFeatureUnselect(event) {
    var feature = lastfeature;  
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}

现在，如果您真的想销毁所有弹出窗口，无论如何（我非常不鼓励）：

function popupClear() {
    //alert('number of popups '+map.popups.length);
    while( map.popups.length ) {
         map.removePopup(map.popups[0]);
    }
}

Answer 2

我记得关于 OpenLayers 的一点是，您应该为特征选择实现一个控件。

我希望它适用于您的标记...

var selectedFeature, selectControl;
function init() {
...
  selectControl = new OpenLayers.Control.SelectFeature(yourMainLayer, {
        onSelect: onFeatureSelect, // will be called on feature select
        onUnselect: onFeatureUnselect // will be called on feature unselect
  });
  selectControl.activate();
...
}

function onFeatureSelect(feature) {
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "some informations",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
}
function onFeatureUnselect(feature) {
   map.removePopup(feature.popup);
   feature.popup.destroy();
   feature.popup = null;
} 
function onPopupClose(evt) {
   selectControl.unselect(selectedFeature);
}

Answer 3

为什么不将打开的弹出窗口放入 if(this.popup == null) 分支上的数组中，然后在 else 分支上循环该数组并隐藏所有弹出窗口。