Wprowadzenie

Znacznik wskazuje lokalizację na mapie. Domyślnie znacznik używa standardowego obrazu. Markery mogą wyświetlać niestandardowe obrazy, w którym to przypadku są zwykle nazywane „ikonami”. Znaczniki i ikony to obiekty typu Marker. Możesz ustawić niestandardową ikonę w konstruktorze znacznika lub wywołując setIcon() na znaczniku. Więcej informacji o dostosowywaniu obrazu znacznika znajdziesz poniżej.

Mówiąc ogólnie , markery są rodzajem nakładek. Aby uzyskać informacje na temat innych typów nakładek, zobacz Rysowanie na mapie.

Znaczniki są zaprojektowane tak, aby były interaktywne. Na przykład domyślnie odbierają "click" zdarzenia, dzięki czemu można dodać detektor zdarzeń, aby wyświetlić okno informacyjne zawierające informacje niestandardowe. Możesz zezwolić użytkownikom na przesuwanie znacznika na mapie, ustawiając znacznik „s draggable na true. Aby uzyskać więcej informacji na temat znaczników, które można przeciągać, zobacz poniżej.

Dodaj znacznik

Konstruktor google.maps.Marker przyjmuje pojedynczy element Marker options literał obiektu, określający początkowe właściwości znacznika.

Następujące pola są szczególnie ważne i często ustawiane podczas konstruowania znacznika:

• position (wymagane) określa LatLng identyfikujące początkową alokację znacznika. Jednym ze sposobów uzyskania LatLng jest skorzystanie z usługi Geocoding.
• map (opcjonalnie) określa Map, na którym należy umieścić znacznik. Jeśli nie określisz mapy na budowie znacznika, znacznik zostanie utworzony, ale nie jest dołączony do mapy (ani nie jest na niej wyświetlany). Znacznik można dodać później, wywołując znacznik „s setMap().

Poniższy przykład dodaje prosty znacznik do mapy w Uluru, w centrum Australii:

W powyższym przykładzie znacznik jest umieszczony na mapie podczas budowy znacznika za pomocą właściwości map w opcjach znacznika. Alternatywnie, możesz dodać znacznik do mapy bezpośrednio, używając znacznika „s setMap(), jak pokazano w poniższym przykładzie:

Znacznik „s title pojawi się jako podpowiedź.

Jeśli nie chcesz przekazywać żadnego Marker options w konstruktorze znacznika, zamiast tego przekaż pusty obiekt {} w ostatnim argument konstruktora.

Zobacz przykład

Usuń znacznik

Aby usunąć znacznik z mapy, wywołaj setMap() przekazując null jako argument.

marker.setMap(null);

Zwróć uwagę, że powyższe metoda nie usuwa znacznika. Usuwa znacznik z mapy. Jeśli zamiast tego chcesz usunąć znacznik, powinieneś usunąć go z mapy, a następnie ustawić sam znacznik na null.

Jeśli chcesz zarządzać zestaw markerów, powinieneś utworzyć tablicę do przechowywania znaczników. Używając tej tablicy, możesz po kolei wywołać setMap() na każdym znaczniku w tablicy, gdy chcesz usunąć znaczniki. Możesz usunąć znaczniki, usuwając je z mapy, a następnie ustawiając tablicę „s length na 0, co spowoduje usunięcie wszystkich odniesień do znaczniki.

Zobacz przykład

Animowanie znacznika

Możesz animować znaczniki tak, aby wykazywały dynamiczny ruch w różnych okolicznościach. Aby określić sposób, w jaki marker jest animowany, użyj właściwości znacznika „s animation typu google.maps.Animation. Obsługiwane są następujące wartości Animation:

• DROP wskazuje, że znacznik powinien spaść od góry mapę do jej ostatecznej lokalizacji, gdy po raz pierwszy umieszczono na mapie. Animacja zakończy się, gdy znacznik zatrzyma się, a animation powróci do null. Ten typ animacji jest zwykle określany podczas tworzenia Marker.
• BOUNCE wskazuje, że znacznik powinien odbić się miejsce. Odbijający się znacznik będzie odbijał się, dopóki jego właściwość animation nie zostanie wyraźnie ustawiona na null.

Ty może zainicjować animację na istniejącym znaczniku, wywołując setAnimation() na obiekcie Marker.

Jeśli masz wiele znaczników , możesz nie chcieć upuścić ich wszystkich na mapie naraz. Możesz użyć animacji setTimeout(), aby rozmieścić swoje znaczniki w animacjach, używając wzoru pokazanego poniżej:

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

Zobacz przykład

Dostosuj obraz znacznika

Jeśli chcesz wyświetlić literę lub cyfrę na znaczniku, możesz użyć etykiety znacznika.Jeśli potrzebujesz większego dostosowania, możesz zdefiniować ikonę, która będzie wyświetlana zamiast domyślnego obrazu znacznika. Definiowanie ikony obejmuje ustawienie wielu właściwości, które określają wizualne zachowanie znacznika.

Poniższe sekcje opisują etykiety znaczników, proste ikony, złożone ikony i symbole (ikony wektorowe).

Etykiety znaczników

Etykieta znacznika to litera lub cyfra pojawiająca się wewnątrz znacznika. Obraz znacznika w tej sekcji wyświetla etykietę znacznika z literą „B”. Możesz określić etykietę znacznika jako ciąg lub obiekt MarkerLabel, który zawiera ciąg i inne właściwości etykiety.

Podczas tworzenia znacznika możesz określić Właściwość label w obiekcie MarkerOptions. Alternatywnie możesz wywołać setLabel() na obiekcie Marker, aby ustawić etykietę na istniejącym znaczniku.

Poniższy przykład wyświetla oznaczone znaczniki, gdy użytkownik kliknie mapę :

Proste ikony

W najbardziej podstawowym przypadku ikona może wskazywać obraz do użycia zamiast domyślnej ikony pinezki w Mapach Google. Aby określić taką ikonę, ustaw właściwość znacznika „s icon na adres URL obrazu. Interfejs API JavaScript Map automatycznie dostosuje rozmiar ikony.

Złożone ikony

Możesz określić złożone kształty, aby wskazać regiony, które można kliknąć, i określić, jak ikony powinny wyglądać w stosunku do innych nakładek (ich „kolejność na stosie”). Ikony określone w ten sposób powinny mieć icon do obiektu typu Icon.

Icon definiują obiekty obraz. Definiują również size ikony, origin ikony (jeśli żądany obraz jest częścią większego na przykład obraz w ikonie) i anchor, w którym powinien znajdować się punkt aktywny ikony (na podstawie pochodzenia).

Jeśli używasz etykiety z niestandardowym znacznikiem, możesz umieścić etykietę za pomocą właściwości labelOrigin w obiekt.

Konwersja MarkerImage obiektów do typu Icon

Do wersji 3.10 interfejsu API JavaScript Map Google złożone ikony były definiowane jako obiekty MarkerImage. Literał obiektu Icon został dodany w wersji 3.10 i zastępuje MarkerImage od wersji 3.11. Icon literały obiektów obsługują te same parametry, co MarkerImage, umożliwiając łatwą konwersję MarkerImage do Icon, usuwając konstruktora, opakowując poprzednie parametry w {} „s i dodając nazwy każdego parametru. Na przykład:

zmienia się w

Symbole

Oprócz obrazów rastrowych, znacznik obsługuje wyświetlanie ścieżek wektorowych o nazwie Symbols . Aby wyświetlić ścieżkę wektorową, należy przekazać literał obiektu Symbol z żądaną ścieżką do właściwości znacznika „s icon. Możesz użyć jednej z predefiniowanych ścieżek w google.maps.SymbolPath lub zdefiniować własną ścieżkę za pomocą notacji SVG.

Aby uzyskać więcej informacji, zapoznaj się z dokumentacją dotyczącą symboli.

Utwórz możliwość przeciągania znacznika

Aby umożliwić użytkownikom przeciąganie znacznika w inne miejsce na mapie, ustaw draggable na true w opcjach znaczników.

Dalsze dostosowywanie znaczników

Aby uzyskać w pełni dostosowany znacznik, zobacz przykład dostosowanego okna podręcznego.