2012-02-18 22 views
4

Openlayersを使用して約1000点以上のマップを作成しています。現在、あるポイントのアイコンをクリックすると、ポイントの説明がポップアップに表示され、ポップアップを終了するには同じポイントのアイコンをもう一度クリックする必要があります。閉じるボタンを押すか、地図上のどこかをクリックするとこのポップアップが再び閉じるようにコードを修正する方法はありますか?私はちょうど普通のポップアップを使用しているが、私はOpenlayers.layer.text層を使用している場合は方法があることを知っている。Openlayersテキストレイヤを使用してポップアップを編集する方法

このコードを使用してテキストレイヤーを追加します。テキストファイル内には、以下の列があります。lon lat title description icon iconSize iconOffset。ポップアップのために追加する必要がある別の列がありますか?私はポップアップのサイズを変更するはずだったコラムを試しましたが、それは私にとってはうまくいかなかったのです。だから、これまでのところ私はポップアップを変更することができませんでした。

答えて

2

ポップアップのコンストラクタ呼び出しで、クローズボックスが存在するように指定できます。

OpenLayersをドキュメントから: http://dev.openlayers.org/apidocs/files/OpenLayers/Popup-js.html

Parameters 
... 
closeBox {Boolean} Whether to display a close box inside the popup. 
closeBoxCallback {Function} Function to be called on closeBox click. 

、あなたがポップアップを表示するには、レイヤイベントfeatureselectedを使用する場合は、ポップアップを閉じますfeatureunselectedイベントを使用することができます。

3

コントロールを持つマップを更新する場合は、複数のコントロールとイベントハンドラがないように注意してください(この記事の末尾の最後の注意を参照してください)。

ポップアップ内のCLOSE( 'X')ボックスと、ポップアップがフォーカスを失ったときにポップアップを閉じる自動プロシージャの2つの異なるイベントがポップアップを閉じることができます。

この疑似コードは、ユーザーが任意のマーカーをクリックすると表示されるポップアップウィンドウを持つ機能マップから取得されました。

iは(PHPで解析動的KMLファイルから、この場合には、)マップ上の層を作成する:

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

次に私は「selectStop」呼び出し、iは2つの機能を関連付ける選択コントロールを作成します(マーカーが選択及び非選択された場合)イベントに:

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

これらは、2つのマーカが選択された場合の機能または選択解除

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; 
    } 
} 
であります

onFeatureSelect関数では、私は 'lastfeature'というGLOBAL変数を作成することに注意してください。私がこれを行う理由は、それがUNSELECTEDかCLOSE BOXがCLICKEDの場合に、私のonFeatureUnselectがポップアップを破壊するために使用されるようなものです。

グローバル変数として機能を保存しなかった場合は、それぞれの原因が異なるため、選択解除とクローズボックスを別々に処理する必要があります。ポップアップ内のCLOSE BOXを作成する

は、私はクローズボックスのためのコールバック関数としてonFeatureUnselect TRUEと名前に(onFeatureSelect機能のポップアップ宣言で)最後の引数に2番目の設定:

popup = new OpenLayers.Popup.FramedCloud("chicken", 
         feature.geometry.getBounds().getCenterLonLat(), 
         new OpenLayers.Size(100,100), 
         content, 
         null, true, onFeatureUnselect); 

最後の注意:レイヤーでリフレッシュを使用している場合、ハンドラを複製しないように注意してください。その場合、javascriptが起動するときに、あなたのselectStopコントロールIDを保持する変数 'id1'を作成します。新しいコントロールとハンドラーを作成する前にそれが存在するかどうかを確認してください。

if (id1 == '') { 
    var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); 

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

あなたのイベントハンドラを複製するかどうかは、onFeatureSelectに警告を出すことで確認できます。マーカーをクリックして複数のアラートウィンドウが表示された場合は、重複するハンドラがあります。あなたはポップアップを破壊することはできないという印象を受けます。これは真実ではありません。あなたは1つのポップアップを破壊しましたが、あなたはN個の同一のポップアップを持っています(途中で同じIDで)。

関連する問題