2012-02-15 3 views
2

これは私の最初の質問stackoverflowと英語は私の母国語ではないので、私はエラーを言いたいです。OpenLayers.Popup closeBoxCallbackが実行されない

私は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); 

ポップアップの閉じるボタンをクリックすると、イベントが発生します。しかし、他のマーカーをクリックしても、それは解雇されません。新しいイベントが発生しません表示された場合はすべてのポップアップが非表示になりますように、私がtrueに排他addPopupの第二の属性)を設定する。また

map.addPopup(this.popup, false); 

ありがとうございました。

答えて

0

より良い解決策が存在するまで、私たちは、次のいずれかを使用することができると思う:

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

:)

関連する問題