Google Map API V3: Hinzufügen von benutzerdefinierten Daten zu Markierungen


115

Gibt es eine Möglichkeit, meinen Markierungen benutzerdefinierte Informationen zur späteren Verwendung hinzuzufügen? Es gibt Möglichkeiten, ein Infofenster und einen Titel zu haben, aber was ist, wenn ich den Marker mit anderen Informationen verknüpfen möchte?

Auf der Seite werden andere Dinge angezeigt, die von den Markierungen abhängen. Wenn also auf eine Markierung geklickt wird, muss sich der Inhalt der Seite ändern, je nachdem, auf welche Markierung geklickt wurde. Ich möchte die benutzerdefinierten Daten speichern und abrufen, sobald eine Markierung vorhanden ist geklickt etc.

Vielen Dank

Antworten:


211

Da ein Google Marker ein JavaScript-Objekt ist, können Sie dem Formular benutzerdefinierte Informationen hinzufügen key: value, wobei der Schlüssel eine gültige Zeichenfolge ist. Sie werden als Objekteigenschaften bezeichnet und können auf viele verschiedene Arten angegangen werden. Der Wert kann alles sein, was legal ist, so einfach wie Zahlen oder Zeichenfolgen, aber auch Funktionen oder sogar andere Objekte. Drei einfache Möglichkeiten: in der Deklaration Punktnotation und eckige Klammern

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Um es dann auf ähnliche Weise abzurufen:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
Die Dokumentation enthält nichts , was dieses Muster formalisiert. Wir hoffen, dass sie es tun, anstatt es in einer späteren Version zu brechen.
Adam

1
Die Eigenschaft 'customInfo' ist für den Typ 'Marker' nicht vorhanden.
Alehn96

1
Wenn Sie Typoskript verwenden, möchten Sie möglicherweise die Klammern anstelle des Punkts verwenden, um solche Eigenschaften zuzuweisen
Cocoduf

14

Sie können den Markierungen Ihre eigenen benutzerdefinierten Eigenschaften hinzufügen (achten Sie jedoch darauf, dass keine Konflikte mit den Eigenschaften der API auftreten).

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.