OpenLayers.Popup closeBoxCallback not fired

Question

这是我在stackoverflow上的第一个问题，英语不是我的母语，所以我想为错误开脱。

我有一个OpenLayers地图，上面有一些标记。每个标记都有自己的弹出窗口，当点击它时会显示。如果点击标记，它应该会消失，只有弹出窗口可见。当弹出窗口关闭时，标记应再次出现。

var map = new OpenLayers.Map({
    div: 'map'
});
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayers([new OpenLayers.Layer.Google('Google Streets'), markers]);
var closeCallback = function() {
    console.log("CLOSE!!!");
    this.marker.display(true);
    this.hide();
};
var clickCallback = function(event) {
    for (var i = 0; i < map.popups.length; i = i + 1) {
        if (map.popups[i].visible()) {
            map.popups[i].hide();
        }
    }
    if (map.popups.indexOf(this.popup) == -1) {
        map.addPopup(this.popup, false);
        this.popup.marker = this.marker;
    }
    this.popup.show();
    this.marker.display(!this.popup.visible());
    OpenLayers.Event.stop(event);
};
var lonLat1 = new OpenLayers.LonLat(0, 0).transform(defaultProjection, map.getProjectionObject());
var feature1 = new OpenLayers.Feature(markers, lonLat1);
var marker1 = feature1.createMarker();
var popup1 = new OpenLayers.Popup.FramedCloud(
    'popup1',
    lonLat1,
    new OpenLayers.Size(200, 200),
    'loading...',
    null,
    true,
    closeCallback
);
feature1.data.icon = icon.clone();
feature1.popup = popup1;
markers.addMarker(marker1);
marker1.events.register('mousedown', feature1, clickCallback);
var lonLat2 = new OpenLayers.LonLat(0, 0.5).transform(defaultProjection, map.getProjectionObject());
var feature2 = new OpenLayers.Feature(markers, lonLat2);
var marker2 = feature2.createMarker();
var popup2 = new OpenLayers.Popup.FramedCloud(
    'popup2',
    lonLat2,
    new OpenLayers.Size(200, 200),
    'loading...',
    null,
    true,
    closeCallback
);
feature2.data.icon = icon.clone();
feature2.popup = popup2;
markers.addMarker(marker2);
marker2.events.register('mousedown', feature2, clickCallback);

如果我点击弹出窗口的关闭按钮，就会触发该事件。但如果我点击另一个标记，它就不会被发射。

map.addPopup(this.popup, false);

此外，当我将exclusive（addPopup的第二个属性）设置为true，以便在出现新的弹出窗口时隐藏所有弹出窗口时，事件不会被触发。

谢谢你的帮助。

Answer 1

在有更好的解决方案之前，我认为我们可以使用以下解决方案：

重写OpenLayers.Popup中的addCloseBox方法。查看我所做的更改。

/**
 * Method: addCloseBox
 * 
 * Parameters:
 * callback - {Function} The callback to be called when the close button
 *     is clicked.
 */
OpenLayers.Popup.prototype.addCloseBox = function(callback) {
    this.closeDiv = OpenLayers.Util.createDiv(
        this.id + "_close", null, {w: 17, h: 17}
    );
    this.closeDiv.className = "olPopupCloseBox"; 
    // use the content div's css padding to determine if we should
    //  padd the close div
    var contentDivPadding = this.getContentDivPadding();
    this.closeDiv.style.right = contentDivPadding.right + "px";
    this.closeDiv.style.top = contentDivPadding.top + "px";
    this.groupDiv.appendChild(this.closeDiv);
    // COMMENT OUT THIS DEFINITION OF 'closePopup'
    //var closePopup = callback || function(e) {
    //    this.hide();
    //    OpenLayers.Event.stop(e);
    //};
    // NEW DEFINITION OF 'closePopup'
    var closePopup = function(e) {
        this.hide();
        /* Checks whether the callback is a function */
        if (typeof callback == 'function') { 
            /* Triggers the callback */
            callback(); 
        }
        OpenLayers.Event.stop(e);
    };
    OpenLayers.Event.observe(this.closeDiv, "touchend", 
            OpenLayers.Function.bindAsEventListener(closePopup, this));
    OpenLayers.Event.observe(this.closeDiv, "click", 
            OpenLayers.Function.bindAsEventListener(closePopup, this));
};

：）