2012-02-14 11 views
4

OpenLayersを使用してマップとプロットの場所を作成しています。各場所にはマーカーとポップアップがあり、OpenLayersを使用して作成されています。フィーチャ - ここでは私の快適ゾーンの外にあるので、サンプルコードを一緒に飾っています。OpenLayersからすべてのポップアップを削除する機能

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

マップは、多くのマーカーを含むことができます(私は簡潔にするために明白な変数割り当てであることを望むものをみじん切りしました)次のように

マーカーが作成されます。

マーカーをクリックすると、ポップアップがオン/オフを切り替えます。私が夢中にしているのは、新しいマーカーがクリックされてポップアップがオンになったときにマップ上のすべてのマーカーに関するすべてのポップアップを閉じることです。つまり、一度に1つのポップアップを表示するだけです。

私のアプローチはすべて間違っているかもしれませんが、ポインタには感謝しています。

答えて

10

一度に1つのポップアップしかアクティブではなく(つまり、ポップアップが選択解除されるたびに消えてしまう)、ソリューションを実装すると、一度に複数のポップアップが表示されることはありません。

read 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]); 
    } 
} 
1

私がOpenLayersについて覚えているのは、機能選択のコントロールを実装する必要があるということです。私はそれはあなたのマーカーと作品を願っています

...あなたはif(this.popup == null)ブランチ上の配列にオープンポップアップを投げ、そしてelse分岐ループでこのアレイの上と隠さないのはなぜ

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

感謝をコメントのために、私はjQueryを使用してそれを見せかけ、今のところトグルなしで仕事をしています: ' var markerClick = function(evt){ $("。olPopup ")。hide(); this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); allPopups.push(this.popup); this.popup.show(); currentPopup = this.popup; OpenLayers.Event.stop(evt); }; ' –

+0

Ahk - コメントでコードブロックを取得する方法は完全な謎です... –

+0

コメントボックスの横にあるヘルプをクリックすると、それが表示されます。 ''コード '' – capdragon

1

すべてのポップアップ。

関連する問題