Einführung

Eine Markierung identifiziert einen Ort auf einer Karte. Standardmäßig verwendet ein Marker ein Standardbild. Markierungen können benutzerdefinierte Bilder anzeigen. In diesem Fall werden sie normalerweise als „Symbole“ bezeichnet. Markierungen und Symbole sind Objekte vom Typ Marker. Sie können ein benutzerdefiniertes Symbol im Konstruktor des Markers festlegen oder setIcon() für den Marker aufrufen. Weitere Informationen zum Anpassen des Markierungsbilds finden Sie weiter unten.

Allgemein gesagt Markierungen sind eine Art Überlagerung. Informationen zu anderen Überlagerungstypen finden Sie unter Zeichnen auf der Karte.

Markierungen sind interaktiv gestaltet. Standardmäßig erhalten sie beispielsweise Ereignisse, sodass Sie einen Ereignis-Listener hinzufügen können, um ein Infofenster mit benutzerdefinierten Informationen aufzurufen. Sie können Benutzern das Verschieben einer Markierung auf der Karte ermöglichen, indem Sie die Markierung „s draggable Eigenschaft zu true. Weitere Informationen zu ziehbaren Markierungen finden Sie weiter unten.

Hinzufügen einer Markierung

Der Konstruktor google.maps.Marker verwendet eine einzelne Marker options Objektliteral, das die Anfangseigenschaften des Markers angibt.

Die folgenden Felder sind besonders wichtig und werden häufig beim Erstellen eines Markers festgelegt:

• position (erforderlich) gibt ein LatLng an, das die Initiallokation des Markers identifiziert. Eine Möglichkeit zum Abrufen einer LatLng ist die Verwendung des Geokodierungsdienstes.
• map (optional) gibt die Map an, auf der der Marker platziert werden soll. Wenn Sie die Karte bei der Konstruktion des Markers nicht angeben, wird der Marker erstellt, aber nicht an die Karte angehängt (oder auf dieser angezeigt). Sie können den Marker später hinzufügen, indem Sie den Marker „s setMap() -Methode.

Im folgenden Beispiel wird einer Karte am Uluru im Zentrum Australiens eine einfache Markierung hinzugefügt:

Im obigen Beispiel ist die Markierung Wird beim Erstellen des Markers mit der Eigenschaft map in den Markeroptionen auf der Karte platziert. Alternativ können Sie den Marker direkt zur Karte hinzufügen, indem Sie den Marker „s -Methode, wie im folgenden Beispiel gezeigt:

Der Marker „s title wird als QuickInfo angezeigt.

Wenn Sie im Konstruktor des Markers kein Marker options übergeben möchten, übergeben Sie stattdessen ein leeres Objekt {} im letzten Argument des Konstruktors.

Beispiel anzeigen

Markierung entfernen

Um eine Markierung aus der Karte zu entfernen, rufen Sie die setMap() Methode, die null als Argument übergibt.

marker.setMap(null);

Beachten Sie Folgendes Methode löscht den Marker nicht. Es entfernt die Markierung von der Karte. Wenn Sie stattdessen die Markierung löschen möchten, sollten Sie sie aus der Karte entfernen und dann die Markierung selbst auf null setzen.

Wenn Sie eine Markierung verwalten möchten Satz von Markern, sollten Sie ein Array erstellen, um die Markierungen zu halten. Mit diesem Array können Sie dann setMap() für jeden Marker im Array nacheinander aufrufen, wenn Sie die Marker entfernen müssen. Sie können die Markierungen löschen, indem Sie sie aus der Karte entfernen und dann das Array „s length auf 0 setzen, wodurch alle Verweise auf das entfernt werden Marker.

Beispiel anzeigen

Marker animieren

Sie können Marker so animieren, dass sie unter verschiedenen Umständen eine dynamische Bewegung zeigen. So legen Sie fest, wie a Der Marker ist animiert. Verwenden Sie die Eigenschaft „s animation des Markers vom Typ google.maps.Animation. Die folgenden Animation -Werte werden unterstützt:

• DROP gibt an, dass der Marker von oben abfallen soll Die Karte wird beim ersten Platzieren auf der Karte an ihren endgültigen Standort gebracht. Die Animation wird beendet, sobald der Marker zur Ruhe kommt und animation auf null zurückgesetzt wird. Diese Art der Animation wird normalerweise beim Erstellen von Marker angegeben.
• BOUNCE gibt an, dass der Marker einspringen soll Platz. Ein springender Marker springt weiter, bis seine Eigenschaft animation explizit auf null gesetzt ist.

Sie Sie können eine Animation für einen vorhandenen Marker initiieren, indem Sie setAnimation() für das Objekt Marker aufrufen.

Wenn Sie viele Marker haben Vielleicht möchten Sie sie nicht alle auf einmal auf der Karte ablegen. Sie können setTimeout() verwenden, um Ihre Markierungsanimationen mit einem Muster wie dem unten gezeigten zu platzieren:

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

Beispiel anzeigen

Anpassen eines Markierungsbildes

Wenn Sie einen Buchstaben oder eine Zahl auf einer Markierung anzeigen möchten, können Sie eine Markierungsbezeichnung verwenden.Wenn Sie weitere Anpassungen benötigen, können Sie anstelle des Standardmarkierungsbilds ein anzuzeigendes Symbol definieren. Das Definieren eines Symbols umfasst das Festlegen einer Reihe von Eigenschaften, die das visuelle Verhalten des Markers bestimmen.

In den folgenden Abschnitten werden Markierungsbezeichnungen, einfache Symbole, komplexe Symbole und Symbole (Vektorsymbole) beschrieben.

Markierungsbezeichnungen

Eine Markierungsbezeichnung ist ein Buchstabe oder eine Zahl, die innerhalb einer Markierung erscheint. Das Markierungsbild in diesem Abschnitt zeigt eine Markierungsbezeichnung mit dem Buchstaben „B“ an. Sie können eine Markierungsbezeichnung entweder als Zeichenfolge oder als MarkerLabel -Objekt angeben, das eine Zeichenfolge und andere Beschriftungseigenschaften enthält.

Beim Erstellen einer Markierung können Sie eine angeben label -Eigenschaft im MarkerOptions -Objekt. Alternativ können Sie setLabel() für das Marker-Objekt aufrufen, um die Beschriftung für eine vorhandene Markierung festzulegen.

Im folgenden Beispiel werden beschriftete Markierungen angezeigt, wenn der Benutzer auf die Karte klickt :

Einfache Symbole

Im einfachsten Fall kann ein Symbol ein Bild angeben, das anstelle des standardmäßigen Google Maps-PIN-Symbols verwendet werden soll. Um ein solches Symbol anzugeben, setzen Sie die Eigenschaft „s icon der Markierung auf die URL eines Bildes. Die Maps-JavaScript-API ändert die Größe des Symbols automatisch.

Komplexe Symbole

Möglicherweise möchten Sie komplexe Formen angeben, um Bereiche anzugeben, auf die geklickt werden kann, und festlegen, wie die Symbole relativ zu anderen Überlagerungen angezeigt werden sollen (ihre „Stapelreihenfolge“). Auf diese Weise angegebene Symbole sollten ihre icon Eigenschaften für ein Objekt vom Typ Icon.

Icon Objekte definieren Sie definieren auch die size des Symbols, die origin des Symbols (wenn das gewünschte Bild Teil eines größeren ist Bild in einem Sprite (zum Beispiel) und die anchor, in der sich der Hotspot des Symbols befinden soll (basierend auf dem Ursprung).

Wenn Sie Wenn Sie eine Beschriftung mit einer benutzerdefinierten Markierung verwenden, können Sie die Beschriftung mit der Eigenschaft labelOrigin in der Objekt.

Konvertieren von MarkerImage Objekten in den Typ Icon

Bis Version 3.10 der Maps JavaScript API wurden komplexe Symbole als MarkerImage Objekte definiert. Das Objektliteral Icon wurde in Version 3.10 hinzugefügt und ersetzt MarkerImage ab Version 3.11. Icon Objektliterale unterstützen dieselben Parameter wie MarkerImage, sodass Sie eine MarkerImage problemlos konvertieren können zu einem Icon durch Entfernen des Konstruktors, Umschließen der vorherigen Parameter in {} „s und Hinzufügen der Namen der einzelnen Parameter. Beispiel:

wird zu

Symbolen

Zusätzlich zu Rasterbildern unterstützt eine Markierung die Anzeige von Vektorpfaden mit dem Namen Symbols Um einen Vektorpfad anzuzeigen, übergeben Sie ein Symbol -Objektliteral mit dem gewünschten Pfad an die Eigenschaft icon des Markers. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad mithilfe der SVG-Pfadnotation definieren.

Weitere Informationen finden Sie in der Dokumentation zu Symbolen.

Erstellen Sie a Marker ziehbar

Damit Benutzer einen Marker an eine andere Stelle auf der Karte ziehen können, setzen Sie draggable auf true in den Markierungsoptionen.

Weitere Markeranpassung

Eine vollständig angepasste Markierung finden Sie im Beispiel für ein benutzerdefiniertes Popup.