112

私のサイトでは、Google Maps API v3 を使用して家のマーカーを地図上に配置しています。

閉じるアイコンを明示的にクリックしない限り、InfoWindows は開いたままになります。つまり、マップ マーカーにカーソルを合わせると、一度に 2 つ以上の InfoWindow を開くことができます。

質問: 現在アクティブな InfoWindow のみを開き、他のすべての InfoWindow を閉じるにはどうすればよいですか? 一度に開くことができる InfoWindow は 1 つだけですか?

4

12 に答える 12

157

InfoWindowsにはclose()関数があります。最後に開いたウィンドウを追跡し、新しいウィンドウが作成されたときに close 関数を呼び出すだけです。

于 2010-02-08T18:54:34.670 に答える
68

多くの情報ウィンドウを使用する場合の代替ソリューション: 前に開いた情報ウィンドウを変数に保存し、新しいウィンドウが開いたら閉じる

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}
于 2012-02-28T11:55:41.687 に答える
27 
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

これにより、クリックされた各マーカーに情報ウィンドウが「移動」され、事実上それ自体が閉じられ、新しい場所で再び開かれます (ビューポートに合わせてパンされます)。目的の効果を得るために、開く前に内容を変更します。n 個のマーカーに対して機能します。

于 2010-09-18T23:56:25.633 に答える
9

このリンクからhttp://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: これを行う最も簡単な方法は、InfoWindow オブジェクトのインスタンスを 1 つだけにして、何度も再利用することです。そうすれば、新しいマーカーをクリックすると、infoWindow が現在の場所から「移動」され、新しいマーカーを指すようになります。

setContent メソッドを使用して、正しいコンテンツをロードします。

于 2010-02-08T17:40:17.587 に答える
4

close() 関数を使用する以外に、もっと簡単な方法があります。InfoWindow プロパティを使用して変数を作成すると、別の変数を開くと自動的に閉じます。

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}
于 2012-08-13T13:22:30.227 に答える
2 
var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}
于 2011-07-05T17:14:59.417 に答える
1

現在開いている情報ウィンドウを追跡するために、上部に変数を保存しました。以下を参照してください。

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
});
于 2013-10-22T16:07:56.803 に答える