Google Haritalar: Açık InfoWindows otomatik olarak kapatılsın mı?


108

Sitemde , haritaya ev işaretçileri yerleştirmek için Google Maps API v3 kullanıyorum.

Kapat simgesine açıkça tıklamadığınız sürece InfoWindows açık kalır. Yani, harita işaretleyicisinin üzerine gelirseniz aynı anda 2'den fazla InfoWindows'u açabilirsiniz.

Soru : Yalnızca geçerli etkin InfoWindow'un açık olması ve diğer tüm InfoWindows'un kapatılması için bunu nasıl yapabilirim? Yani, bir seferde 1'den fazla InfoWindow açılmayacak mı?


1
Bana gelince, tek bir bilgi penceresi oluşturup onu güncellemek (içeriği vb.), Açıp kapatmak ve her şeyi yapmak daha iyidir . Ancak bu yaklaşımın her zaman uygulanabilir olmadığından oldukça eminim.
andrii

Yanıtlar:


154

InfoWindows için bir close () işlevi vardır. Sadece son açılan pencereyi takip edin ve yeni bir pencere oluşturulduğunda bu pencerede kapat işlevini çağırın.

Bu demo , aradığınız işlevselliğe sahiptir. Bunu, Maps API V3 demo galerisinde buldum .


4
Yalnızca son açılan pencereyi takip etme önerisi için oy verildi. Hiç akıllıca görünmüyor, ancak insanlar bunları unutuyor ...
Rémi Breton

1
Ben de aynı tekniği kullandım. Teşekkürler Chris. Benim için gerekliydi, çünkü sadece ilgili bilgileri dolaşan ve alan bir InfoWindow nesnesi dizisi kullanıyorum. Her InfoWindow'un kendi ayrı güncelleme bilgisi vardır, bu yüzden bu tekniği oldukça faydalı buldum.
InterfaceGuy

2
"bu demo" bağlantısı koptu
Brendan Whiting

Çok teşekkür ederim! Bu yaklaşımı kullandık ve cazip çalıştı. Günümü düzelttin. Upvoted.
Alan Espinet

64

Bunun için birçok bilgi penceresi kullanarak alternatif çözüm: önceki açılan pencereyi bir değişkene kaydedin ve ardından yeni pencere açıldığında kapatın

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

3
Bunun gibi.
Anlaması

6
Saflığımı bağışla, ama WTF temel mi?
wordsforthewise

Google Maps V3'te neden varsayılan davranış olmadığını anlamıyorum ...
Bay Washington

Şimdiye kadar bulduğum en iyi ve en basit çözüm. teşekkür ederim!
Irteza Asad

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

Bu, bilgi penceresini tıklanan her bir işaretleyiciye "hareket ettirecek", aslında kendini kapatacak ve ardından yeni konumunda yeniden açacak (ve görüntü alanına sığacak şekilde kaydıracaktır). İstenilen etkiyi vermek için açılmadan önce içeriğini değiştirir. N markör için çalışıyor.


1
Hızlı not: infowindow.open () için tekrarlanan çağrılar yeterlidir; önce pencerenin kapatılmasına gerek yoktur.
Eric Nguyen

3
@Eric, teknik olarak haklıyken bazen bilgi pencerelerinin son konumlarında görünmesine neden olan bir hata fark ettim. İlk mağlubiyetleri kapatmaya zorlayarak böcek dedik.
Joel Mellon

22

Çözümüm.

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

3
Bu gerçekten zarif - yalnızca tek bir bilgi penceresi kullanmak ve içeriği değiştirmek, öncekini takip etmek / kapatmak zorunda kalmaz.
Nick F

Bu çözüm gerçekten çok zarif ve bir cazibe gibi çalışıyor. +1
Sebastian Breit

9

Bu bağlantıdan http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: Bunu yapmanın en kolay yolu, tekrar tekrar kullandığınız InfoWindow nesnesinin yalnızca bir örneğine sahip olmaktır. Bu şekilde, yeni bir işaretçiyi tıkladığınızda, infoWindow yeni işaretçiyi göstermek için o anda bulunduğu yerden "taşınır".

Doğru içerikle yüklemek için setContent yöntemini kullanın.


Google Haritalar v3 API
Ted

Ayrıca, bağladığınız makale de 1'den fazla işaretçiyi göstermiyor
Ted

Birkaç site için aynı şekilde tek bir bilgi penceresi kullandım. Birini tıklayın, açık olan otomatik olarak kapanır.
Keith Adler

4
Birden fazla işareti tek bir InfoWindow ile nasıl ilişkilendirirsiniz?
Ted

7

Etkin pencere için bir değişken bildirin

var activeInfoWindow; 

ve bu kodu işaretçi dinleyiciye bağlayın

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

Teşekkürler, haritada herhangi bir yere tıkladığınızda gerçekten işe yarıyor.
Varinder Singh Baidwan

Şerefe dostum, tüm öneriler dışında, bu benim için en iyisi oldu ve temiz AF.
Matthew Ellis

4

Close () işlevini kullanmanın yanı sıra daha kolay bir yol var. InfoWindow özelliğiyle bir değişken oluşturursanız, başka birini açtığınızda otomatik olarak kapanır.

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

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

Teşekkürler, bir işaretçiye tıklamadığım zaman bilgi penceresini kapatmam gerekiyordu, bu yüzden sadece harita üzerinde
VRC

1

Peki ya -

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

    });

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

    });

Sonra sadece üzerine gelebilirsin ve kendini kapatır.


Bu ilginç bir çözümdür, ancak soruyu yanıtlamaz ve yalnızca dokunmatik cihazlarda çalışmaz.
Lee

1

Şu anda hangi bilgi penceresinin açık olduğunu takip etmek için en üstte bir değişken depoladım, aşağıya bakın.

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

[Counter] burada ne yapıyor?
Lee

0

Bir for döngüsünde çok sayıda işaretçi kullanıyorsanız (burada Django) bunu kullandım. Her işaretçi için bir indeks ayarlayabilir ve her pencere açtığınızda bu indeksi ayarlayabilirsiniz. Önceden kaydedilmiş dizinin kapatılması:

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 %}

-1
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);
}));
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.