Znaczniki (starsza wersja)

Wybierz platformę: Android iOS JavaScript

Wprowadzenie

Znacznik wskazuje lokalizację na mapie. Domyślnie znacznik używa standardowego obrazu. Markery mogą wyświetlać obrazy niestandardowe, które są zwykle nazywane „ikonami”. znaczniki i ikony to obiekty typu Marker. Niestandardową ikonę możesz ustawić w konstruktorze znacznika lub wywołując metodę setIcon() znacznika. Dowiedz się więcej o dostosowywaniu obrazu znacznika.

Ogólnie rzecz biorąc, znaczniki są rodzajem nakładki. Informacje o innych typach nakładek znajdziesz w artykule Rysowanie na mapie.

znaczniki są interaktywne; Na przykład domyślnie zdarzenia te otrzymują zdarzenia 'click', więc możesz dodać odbiornik zdarzeń, aby wyświetlić okno z informacjami, w którym będą wyświetlane informacje niestandardowe. Możesz zezwolić użytkownikom na przenoszenie znacznika na mapie, ustawiając właściwość draggable na true. Więcej informacji o przeciąganych znacznikach znajdziesz poniżej.

Dodaj znacznik

Konstruktor google.maps.Marker przyjmuje jeden literał obiektu Marker options, który określa początkowe właściwości znacznika.

Podczas tworzenia znacznika te pola są szczególnie ważne i często ustawiane:

  • position (wymagany) określa LatLng, który wskazuje początkową lokalizację znacznika. Jednym ze sposobów pobierania LatLng jest użycie usługi geokodowania.
  • map (opcjonalnie) określa Map, na którym ma zostać umieszczony znacznik. Jeśli nie określisz mapy podczas tworzenia znacznika, zostanie on utworzony, ale nie będzie dołączony do mapy ani na niej wyświetlany. Możesz dodać znacznik później, wywołując metodę setMap() znacznika.

W tym przykładzie dodaję do mapy prosty znacznik w miejscu Uluru w środku Australii:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

W powyższym przykładzie podczas tworzenia znacznika znacznik jest umieszczany na mapie za pomocą właściwości map w opcjach znacznika. Możesz też dodać znacznik bezpośrednio do mapy, używając metody setMap() znacznika, jak pokazano w przykładzie poniżej: 

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Etykieta title znacznika będzie wyświetlana jako etykieta.

Jeśli nie chcesz przekazywać żadnej wartości Marker options w konstruktorze znacznika, zamiast tego w ostatnim argumencie konstruktora podaj pusty obiekt {}.

Zobacz przykład

Usuwanie znacznika

Aby usunąć znacznik z mapy, wywołaj metodę setMap(), podając jako argument wartość null. 

marker.setMap(null);

Pamiętaj, że powyższa metoda nie powoduje usunięcia znacznika. Usunie znacznik z mapy. Jeśli chcesz usunąć znacznik, usuń go z mapy, a następnie ustaw go na null.

Jeśli chcesz zarządzać zbiorem znaczników, utwórz tablicę, która będzie je przechowywać. Gdy chcesz usunąć znaczniki, możesz wywołać funkcję setMap() dla każdego znacznika w tablicy. Możesz usunąć znaczniki, usuwając je z mapy, a następnie ustawiając dla tablicy wartość length na 0, co spowoduje usunięcie wszystkich odwołań do znaczników.

Zobacz przykład

Dostosowywanie obrazu znacznika

Możesz dostosować wygląd znaczników, podając plik z obrazem lub ikonę wektorową, które mają być wyświetlane zamiast domyślnej ikony pinezki w Mapach Google. Możesz dodać tekst za pomocą etykiety znacznika i użyć kompleksowych ikon do definiowania klikalnych obszarów oraz ustawić kolejność nakładania się znaczników.

znaczniki z ikonami obrazów.

W najprostszym przypadku ikona może określać obraz, który ma być użyty zamiast domyślnej ikony pinezki w Mapach Google. Aby określić taką ikonę, ustaw właściwość icon znacznika na adres URL obrazu. Interfejs Maps JavaScript API automatycznie dostosuje rozmiar ikony.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

znaczniki z ikonami wektorowymi;

Do określenia wizualnego wyglądu znaczników możesz używać niestandardowych wektorów wektorowych SVG. Aby to zrobić, prześlij literał obiektu Symbol z chcianą ścieżką do właściwości icon znacznika. Ścieżkę niestandardową możesz zdefiniować za pomocą notacji ścieżki SVG lub użyć jednej z wstępnie zdefiniowanych ścieżek w google.maps.SymbolPath. Właściwość anchor jest wymagana, aby znacznik był prawidłowo renderowany po zmianie poziomu powiększenia. Dowiedz się więcej o używaniu symboli do tworzenia ikon wektorowych w przypadku znaczników (i linii złożonych).

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Etykiety znaczników

Etykieta znacznika to litera lub cyfra wyświetlana wewnątrz znacznika. Obraz markera w tej sekcji przedstawia etykietę markera z literą „B”. Etykietę znacznika możesz określić jako ciąg znaków lub obiekt MarkerLabel zawierający ciąg znaków i inne właściwości etykiety.

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

W tym przykładzie po kliknięciu mapy wyświetlają się oznakowane znaczniki:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Ikony złożone

Możesz określić złożone kształty, aby wskazać obszary, które można kliknąć, oraz określić, jak ikony powinny się wyświetlać w stosunku do innych nakładek (ich „kolejność nakładania”). Ikony określone w ten sposób powinny mieć właściwości icon ustawione na obiekt typu Icon.

Icon obiekty definiują obraz. Określają one też size ikony, origin ikony (jeśli obraz, który chcesz użyć, jest częścią większego obrazu w pliku sprite) oraz anchor, gdzie powinien znajdować się punkt aktywny ikony (który jest określany na podstawie punktu początkowego).

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

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Konwertowanie obiektów MarkerImage na typ Icon

Do wersji 3.10 interfejsu Maps JavaScript API złożone ikony były definiowane jako obiekty MarkerImage. Obiekt literalny Icon został dodany w wersji 3.10 i zastępuje obiekt MarkerImage od wersji 3.11. Literały obiektów Icon obsługują te same parametry co MarkerImage, co pozwala łatwo przekształcić obiekt MarkerImage w obiekt Icon. Aby to zrobić, usuń konstruktor, owiń poprzednie parametry w nawiasy klamrowe {} i dodaj nazwy poszczególnych parametrów. Na przykład: 

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

zmienia się w

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

znaczniki optymalizacji,

Optymalizacja zwiększa wydajność, renderując wiele znaczników jako pojedynczy element statyczny. Jest to przydatne w przypadku dużej liczby znaczników. Domyślnie interfejs Maps JavaScript API sam decyduje, czy dany znacznik ma być optymalizowany. Jeśli jest duża liczba znaczników, interfejs Maps JavaScript API spróbuje je wyrenderować z optymalizacją. Nie wszystkie znaczniki można zoptymalizować. W niektórych sytuacjach interfejs Maps JavaScript API może być zmuszony do renderowania znaczników bez optymalizacji. Wyłącz optymalizowane renderowanie animowanych GIF-ów lub plików PNG albo gdy każdy znacznik musi być renderowany jako osobny element DOM. Ten przykład pokazuje tworzenie oznakowania zoptymalizowanego: 

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

Udostępnianie znacznika

Aby udostępnić znacznik, dodaj zdarzenie detektora kliknięcia i ustaw wartość optimized na false. Listener kliknięcia sprawia, że znacznik ma semantykę przycisku, do której można uzyskać dostęp za pomocą nawigacji za pomocą klawiatury, czytników ekranu itp. Użyj opcji title, aby wyświetlić tekst ułatwiający dostęp do oznakowania.

W poniższym przykładzie po naciśnięciu klawisza Tab zaznaczenie zostanie przeniesione na pierwszy znacznik. Następnie możesz poruszać się między znacznikami za pomocą klawiszy strzałek. Ponownie naciśnij kartę, aby przejść do pozostałych elementów sterujących mapą. Jeśli marker ma okno z informacjami, możesz je otworzyć, klikając marker lub naciskając klawisz Enter lub spację po jego wybraniu. Gdy okno informacji zostanie zamknięte, fokus wróci do powiązanego znacznika.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Animowanie znacznika

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

  • DROP oznacza, że znacznik powinien opadać z góry mapy do swojej ostatecznej lokalizacji, gdy zostanie umieszczony na mapie po raz pierwszy. Animacja zakończy się, gdy znacznik się zatrzyma, a wartość animation powróci do null. Ten typ animacji jest zwykle określany podczas tworzenia Marker.
  • BOUNCE wskazuje, że znacznik powinien odbijać się w miejscu. Marker odbijający będzie się odbijać, dopóki właściwość animation nie zostanie ustawiona na null.

Animację można uruchomić na istniejącym znaczniku, wywołując funkcję setAnimation() obiektu Marker.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Jeśli masz dużo znaczników, nie musisz umieszczać ich na mapie naraz. Możesz użyć funkcji setTimeout(), aby rozmieścić animacje znaczników, używając wzoru podobnego do tego: 

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

Zobacz przykład

Ustawianie znacznika jako przeciąganego

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

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Dalsze dostosowywanie znaczników

Pełny przykład markera znajdziesz w przykładzie niestandardowego wyskakującego okienka.

Więcej informacji o rozszerzeniach klasy Marker, klastrach znaczników i zarządzaniu nimi oraz dostosowywaniu nakładek znajdziesz w bibliotekach open source.