0

音楽会場とイベントのデータベース用に Maps インターフェースを実装していて、興味深い問題に遭遇しました。特定の Javascript 関数への onclick 呼び出しを含む一連の HTML 要素があります。呼び出しが正しく実行され、javascript 関数が最初に正しく実行され (すべての情報が正しく渡され、デバッグ アラートが正しく表示されます)、infoWindow が表示されます。これらの div の 1 つを 2 回目にクリックすると、最初の div は正しく閉じられます。以下のコードの最後のアラートは正しい情報で発生しますが、新しい InfoWindow はポップアップしません。

マップ設定コード:

function mapsInitialize() {
    var mapOptions = {
        center: new google.maps.LatLng(42.4439614, -76.5018807),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapSection"), mapOptions);
    google.maps.event.trigger(map, 'resize');

    for(var x = 0; x < markers.length; x++){
        var tempOptions = {
            position: markers[x].position,
            title: markers[x].name,
            map: map
        }
        markerObjects[markers[x].title] = new google.maps.Marker(tempOptions); 
    }
}

div から onclick と呼ばれる関数:

function generateInfoWindow(despacedName, despacedTitle, eventTitle, url, date, time){
    if(curInfoWindow){
        alert("closing " + curInfoWindow.getContent());
        curInfoWindow.close();
        curInfoWindow = null;
    }
    curInfoWindow = new google.maps.InfoWindow(options = {size: new google.maps.Size(150,50)});
    curInfoWindow.setContent("<a class=\"eventLink\" href=\""+url+"\">"+eventTitle+"</a><br><br>"+markerObjects[despacedName].title+"<br>"+date+" at "+time);
    curInfoWindow.open(map, markerObjects[despacedName]);
    alert(despacedName+" is "+markerObjects[despacedName]);
}

マーカー[]配列が正しく供給されることを保証できます。

色々と試してみた...

  • 1 つの curInfoWindow 変数を使用する代わりに、infoWindows を保持する配列を作成する

  • generateInfoWindow() 関数の先頭のように、配列に何も自動的に閉じない

  • mapsInitialize() 関数で情報ウィンドウを自動的に作成する

解決策を検索したときの Google での結果のほとんどは、マップ上のイベント リスナーに関する情報をもたらしてくれました。

他のコード例が必要な場合は、お知らせください。ご提案ありがとうございます。

4

1 に答える 1

0

Google マップ API によると:

InfoWindow は、Marker オブジェクト (この場合、それらの位置はマーカーの位置に基づいています) または指定された LatLng でマップ自体にアタッチできます。一度に 1 つの情報ウィンドウのみを表示する場合 (Google マップでの動作と同様)、情報ウィンドウを 1 つだけ作成する必要があります。この情報ウィンドウは、マップ イベント (ユーザーのクリックなど) で別の場所またはマーカーに再割り当てできます。ただし、Google Maps API の V2 での動作とは異なり、必要に応じてマップに複数の InfoWindow オブジェクトを表示できるようになりました。

多分これはうまくいくでしょう：

function generateInfoWindow(despacedName, despacedTitle, eventTitle, url, date, time){
    if(!curInfoWindow){
        curInfoWindow = new google.maps.InfoWindow({maxWidth:150});
    }
    curInfoWindow.setContent("<a class=\"eventLink\" href=\""+url+"\">"+eventTitle+"</a><br><br>"+markerObjects[despacedName].title+"<br>"+date+" at "+time);
    curInfoWindow.open(map, markerObjects[despacedName]);
    alert(despacedName+" is "+markerObjects[despacedName]);
}

仕様によると、これにより既存の curInfoWindow が新しいマーカーに移動され、コンテンツが更新されます。

注: このコードは無効です

new google.maps.InfoWindow(options = {size: new google.maps.Size(150,50)})

サイズ属性はありません。あなたができる最善のことは

new google.maps.InfoWindow({maxWidth:150})

InfoWindow API の詳細

于 2012-11-19T21:27:34.580 に答える