javascript - OpenLayers.Popup closeBoxCallback 未触发

Question

这是我关于 stackoverflow 的第一个问题，英语不是我的母语，所以我想原谅错误。

我有一个带有一些标记的 OpenLayers map 。单击它时，每个标记都有自己的弹出窗口以显示。如果单击标记，它应该消失并且只有弹出窗口应该可见。当弹出窗口关闭时，标记应再次出现。

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));
};

:)