Google Maps: Tự động đóng InfoWindows đang mở?

Trên trang web của mình , tôi đang sử dụng Google Maps API v3 để đặt các điểm đánh dấu nhà trên bản đồ.

InfoWindows vẫn mở trừ khi bạn nhấp vào biểu tượng đóng. Có nghĩa là, bạn có thể mở hơn 2 InfoWindows cùng một lúc nếu bạn di chuột qua điểm đánh dấu bản đồ.

Câu hỏi : Tôi làm cách nào để chỉ InfoWindow đang hoạt động hiện tại được mở và tất cả các InfoWindow khác đều bị đóng? Có nghĩa là, không quá 1 InfoWindow sẽ được mở cùng một lúc?

Có một hàm close () cho InfoWindows. Chỉ cần theo dõi cửa sổ được mở gần đây nhất và gọi hàm đóng trên cửa sổ đó khi một cửa sổ mới được tạo.

Bản demo này có chức năng mà bạn đang tìm kiếm. Tôi tìm thấy nó trong thư viện demo API V3 của Maps .

giải pháp thay thế cho điều này với việc sử dụng nhiều infowindows: lưu infowindow đã mở trước đó trong một biến và sau đó đóng nó khi cửa sổ mới mở ra

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

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

Thao tác này sẽ "di chuyển" cửa sổ thông tin xung quanh đến từng điểm đánh dấu được nhấp, có hiệu lực là chính nó sẽ đóng lại, sau đó mở lại (và xoay để vừa với chế độ xem) ở vị trí mới của nó. Nó thay đổi nội dung của nó trước khi mở để mang lại hiệu quả mong muốn. Hoạt động cho n điểm đánh dấu.

Giải pháp của tôi.

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

Từ liên kết này http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: Cách dễ nhất để làm điều này là chỉ có một phiên bản của đối tượng InfoWindow mà bạn sử dụng lại nhiều lần. Theo cách đó, khi bạn nhấp vào một điểm đánh dấu mới, infoWindow sẽ được “di chuyển” từ vị trí hiện tại của nó để trỏ đến điểm đánh dấu mới.

Sử dụng phương thức setContent của nó để tải nó với nội dung chính xác.

Khai báo một biến cho cửa sổ đang hoạt động

var activeInfoWindow; 

và liên kết mã này trong trình nghe đánh dấu

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

Có một cách dễ dàng hơn ngoài việc sử dụng hàm close (). nếu bạn tạo một biến với thuộc tính InfoWindow, nó sẽ tự động đóng khi bạn mở một biến khác.

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

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

Làm thế nào về -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

Sau đó, bạn chỉ cần di chuột qua nó và nó sẽ tự đóng lại.

Tôi đã lưu trữ một biến ở trên cùng để theo dõi cửa sổ thông tin nào hiện đang mở, xem bên dưới.

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

Đây là những gì tôi đã sử dụng nếu bạn đang sử dụng nhiều điểm đánh dấu trong vòng lặp for (Django ở đây). Bạn có thể đặt chỉ mục trên mỗi điểm đánh dấu và đặt chỉ mục đó mỗi khi bạn mở cửa sổ. Đóng chỉ mục đã lưu trước đó:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));