google maps api mehrere Marker mit info-Fenster

nur immer meine Zähne versenkt in google maps API.

Ich bin versucht, plot ein paar Marker auf einer Karte. Getan. Allerdings bin ich recycling eine variable/Objekt für jeden marker.

Ich zunächst legen Sie marker-Optionen, und fügen Sie der Karte, dann nehmen Sie die gleichen marker-variable, nutzen Sie es und fügen Sie es auf die Karte wieder. Dies bringt zwei einzigartige Marker mit individuellen title-tags.

Möchte ich anzeigen ein Infofenster für jeden marker, bin aber im Zweifel, was ist der beste Weg, es zu tun. Ich sehe auch ein trouble-flag aufspringen mit der Zuweisung klicken Sie auf Ereignisse, um die einzelnen marker, so wie ich bin, mit der gleichen variable hinzufügen jeder Marke, ich bin nicht sicher, wie Sie Sie hinzufügen, um das click-Ereignis, um die einzigartige Marker (durch name, als name ist der gleiche für beide, da es nie erhält keine id?)

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
});

marker_obj.setMap(map);

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
});

marker_obj.setMap(map);

Für die Erstellung des info-Fenster, ich dachte, die eine variable/Objekt zu halten, das info-Fenster, und klicken Sie dann zweckänderung es mit neuen text in die einzelnen marker klicken-Ereignis.

Fragen, die ich habe sind:

1: Sollte ich eine seperate einzigartige variable/Objekt für jeden marker (Gemeinkosten?), wenn nicht, wie erkenne ich das click-Ereignis.

2: Ist es in Ordnung zu Wiederverwendung (re-assign) das info-Fenster-Objekts mit new text, bevor Ihr aufgetaucht, oder sollte ich schaffen eine einzigartige Infofenster für jeden marker?

Ich bin ein bisschen ein Java-n00b, so dass jede Hilfe wäre sehr geschätzt werden.

InformationsquelleAutor Louis van Tonder | 2012-02-02
  1. 10

    Du bist auf dem richtigen Linien. Haben ein Infofenster Objekt, genauso wie Sie ein marker-Objekt. Dann wird der Inhalt des Infofenster ändert sich je nachdem, auf welche Markierung Sie auf. Eine Sache zu beachten (dies geschieht auch, wenn Sie das erstellen von Markern innerhalb einer Loop-Schleife), ist, dass die Gefahr besteht, dass alle infowindows am Ende mit dem Inhalt des letzten. Also erstellen wir eine neue Funktion, die updates der Inhalte.

    Auch, nebenbei bemerkt, Sie haben nicht nennen der setMap () - Funktion auf Ihre Markierung von Objekten anzugeben, können Sie nur die Karte, Attribut in den Optionen, die Sie übergeben, wenn Sie beim erstellen der Marker.

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

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 1');

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 2');

    Dann eine neue Funktion:

    function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
}
    • hey, vielen Dank für den code und die Erklärung. Dein code bricht der 2. Markierung.... Erste angezeigt wird, nicht ohne info-Fenster, 2. Markierung ist Weg.. Wenn ich entfernen Sie die bindInfoWindow(marker_obj, map, Infofenster, "Marker-1'); Linien , die beide Marker zeigen... irgendwelche Ideen? P. s. ist es nicht eine schöne online-IDE-oder etwas, das mir helfen kann, format der java-code-Blöcke etc?
    • Sehen Sie, welche javascript-Fehler auf, wenn alle Sie bekommen?
    • Infofenster ist nicht definiert [Pause zu Diesem Fehler] bindInfoWindow(marker_obj, map, Infofenster, "Das ist info für marker 1');
    • Haben Sie sich daran erinnern und setzen Sie in die erste bit vor Aufruf der Funktion, var Infofenster = ...? Denken Sie daran, Javascript ist case-sensitive
    • Ihr, hah, hatte es nicht decalred oben.. wokring wie ein Charme jetzt!!!, danke Mann. P. s., Ich Plane, um dynamisch zu erstellen jave-Skript, und dann Spritzen Sie/fügen Sie die Seite zur Laufzeit. Ich bin hauptsächlich in der Entwicklung asp.net und erstellen wollen diesem ganze lange java script mit sagen wir, 200-Marker , und dann übergeben Sie das Skript auf der Seite... keine großen Einwände, die ich sich bewusst sein sollte?
    • Ok, diese option funktioniert auch... vielen Dank. Also welche der beiden ist besser / effizienter?
    • wenn du tust 200 Marker ich würde sagen schreib eine Schleife im javascript, das schafft die Marker und fordert die bindInfoWindow Funktion. Die Schleife über ein array oder eine Struktur, die erstellt wurde, indem Sie Ihre ASP.net wie eine javascript-variable. Dies sollte sicherzustellen, dass Ihr Javascript-Code ist übersichtlicher.

    InformationsquelleAutor duncan
  2. 2

    erstellen globaler Infofenster Objekt. var infowindow = new google.maps.InfoWindow();

    hinzufügen und Zuhörer für Ihre globalen marker.

    google.maps.event.addListener(marker, "click", function (e) {
            infowindow.setContent("set marker specific content here");
            infowindow .open(map, this);
        });
    • Hi, ich add var Infofenster = new google.maps.Infofenster(); nur unten meine map obj-Unabhängigkeitserklärung, aber Fehler, die Infofenster ist kein Konstruktor
    • Das ist, weil Javascript ist case-sensitive, es sollte Infofenster Infofenster nicht
    • Danke Mann, hab die ersten eample arbeiten, wird der test auch für Euch, vielen Dank.
    • Ok, diese option funktioniert auch... vielen Dank. Also welche der beiden ist besser / effizienter?
    InformationsquelleAutor Ramesh Kotha
Schreibe einen Kommentar