wake-up-neo.net

Haben Sie nur ein InfoWindow in Google Maps API v3 geöffnet

Ich muss nur ein InfoWindow auf meiner Google Map geöffnet haben. Ich muss alle anderen InfoWindows schließen, bevor ich ein neues eröffne.

Kann mir jemand zeigen, wie das geht?

84
leo

Sie müssen nur ein InfoWindow-Objekt erstellen, einen Verweis darauf behalten und es erneut für alle Markierungen verwenden. Zitieren aus Google Maps API-Dokumenten :

Wenn Sie nur ein Infofenster gleichzeitig anzeigen möchten (wie es in Google Maps der Fall ist), müssen Sie nur ein Infofenster erstellen, das Sie bei Kartenereignissen (z. B. Klicks von Benutzern) anderen Standorten oder Markierungen zuordnen können.

Daher möchten Sie möglicherweise einfach das InfoWindow-Objekt unmittelbar nach dem Initialisieren der Karte erstellen und dann die click-Ereignisbehandlungsroutinen Ihrer Marker wie folgt behandeln. Nehmen wir an, Sie haben eine Markierung namens someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Die InfoWindow sollte dann automatisch geschlossen werden, wenn Sie auf eine neue Markierung klicken, ohne die close()-Methode aufrufen zu müssen.

148
Daniel Vassallo

Erstellen Sie Ihr Infofenster außerhalb des Bereichs, damit Sie es teilen können. 

Hier ist ein einfaches Beispiel:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}
28
skarE

Ich hatte das gleiche Problem, aber die beste Antwort konnte nicht vollständig gelöst werden. Was ich in meiner for-Anweisung tun musste, war die Verwendung dieses Befehls in Bezug auf meinen aktuellen Marker. Vielleicht hilft das jemandem.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}
12
Ferenc Takacs

etwas spät, aber es gelang mir, nur ein Infofenster zu öffnen, indem ich das Infofenster zu einer globalen Variablen machte. 

var infowindow = new google.maps.InfoWindow({});

dann in den Listner

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);
4
user2827958

Deklarieren Sie einen globalen var selectedInfoWindow; und halten Sie damit das geöffnete Infofenster fest:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});
4
IgniteCoders

Grundsätzlich möchten Sie eine Funktion, die einen Verweis auf ein new InfoBox() => delegiert, und das onclick -Ereignis delegieren Beim Erstellen Ihrer Marker (in einer Schleife) verwenden Sie bindInfoBox(xhr, map, marker);.

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox wird asynchron zugewiesen und im Speicher gehalten. Bei jedem Aufruf von bindInfoBox() wird stattdessen die Return-Funktion aufgerufen. Auch praktisch, um die infoBoxOptions nur einmal zu übergeben!

In meinem Beispiel musste ich der map einen zusätzlichen Parameter hinzufügen, da meine Initialisierung durch Tab-Ereignisse verzögert wird.

InfoBoxOptions

0
Tim Vermaelen

Sie müssen Ihr bisheriges InfoWindow - Objekt im Auge behalten und rufen Sie die Methode close auf, wenn Sie das Klickereignis für eine neue Marke behandeln.

N.B Es ist nicht notwendig, close für das Shared Infofenster-Objekt aufzurufen. Beim Öffnen mit einem anderen Marker wird das Original automatisch geschlossen. Siehe Daniels Antwort für Details.

0
RedBlueThing

Hier ist eine Lösung, die nicht nur ein infoWindow erstellen muss, um es wiederzuverwenden. Sie können mit dem Erstellen vieler infoWindows fortfahren. Sie müssen lediglich eine closeAllInfoWindows-Funktion erstellen und diese aufrufen, bevor Sie ein neues infowindow .. öffnen. Wenn Sie also Ihren Code behalten, müssen Sie nur Folgendes tun:

  1. Erstellen Sie ein globales Array, um alle infoWindows zu speichern

    var infoWindows = [];
    
  2. Speichern Sie jedes neue infoWindow im Array, gleich nach dem infoWindow = new ...

    infoWindows.Push(infoWindow);
    
  3. Erstellen Sie die closeAllInfoWindows-Funktion

    function closeAllInfoWindows() {
        for (var i=0;i<infoWindows.length;i++) {
            infoWindows[i].close();
        }
    }
    
  4. Rufen Sie in Ihrem Code kurz vor dem Öffnen von infoWindow closeAllInfoWindows () auf.

Grüße,

0
Jortx