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.
Zastąp domyślną ikonę znacznika niestandardowym zasobem SVG.
Ustawianie wysokości znacznika
Wysokość znacznika możesz ustawić, wyciągając go i określając wysokość.
Reagowanie znaczników na kliknięcia i zdarzenia klawiatury
Spraw, aby znacznik reagował na kliknięcia i zdarzenia klawiatury, dodając click
event
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
});