Znaczniki

Używaj znaczników, aby przyciągać uwagę użytkownika do lokalizacji na mapie. Ten przewodnik pokazuje, jak używać i dostosowywać znaczniki na mapach 3D. Możesz kontrolować kształt, rozmiar i kolor znaczników, a także wysokość, na której się pojawiają.

Używaj znaczników, aby pokazywać lokalizacje na mapach. Powyższy przykład przedstawia podstawowy pojedynczy znacznik bez zastosowanych dostosowań.

Dostosowywanie koloru, skali i ikony

Możesz dostosować tło, glif, kolor obramowania i rozmiar znacznika domyślnego.

Niestandardowe znaczniki

Zastąp domyślną ikonę znacznika niestandardowym zasobem SVG.

Markery z grafiką

Ustawianie wysokości znacznika

Wysokość znacznika możesz ustawić, wyciągając go i określając wysokość.

Wytłaczany marker

Reagowanie znaczników na kliknięcia i zdarzenia klawiatury

Spraw, aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodając clickevent listener.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

Ustawianie działania w przypadku kolizji znacznika

Określ, jak znacznik ma się zachowywać, gdy zderzy się z innym znacznikiem lub etykietą na mapie.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

Następny krok