Utilizza i pennarelli per attirare l'attenzione di un utente su una posizione su una mappa. Questa guida mostra come utilizzare e personalizzare i marcatori nelle mappe 3D. Puoi controllare la forma, le dimensioni e il colore dei marcatori, oltre all'altitudine a cui vengono visualizzati.
Utilizza i marcatori per mostrare le posizioni sulle mappe. L'esempio precedente mostra un singolo indicatore di base senza personalizzazione applicata.
Personalizzare il colore, la scala e l'immagine dell'icona
Personalizza lo sfondo, il glifo, il colore del bordo e le dimensioni dell'indicatore predefinito.
Sostituisci l'icona indicatore predefinita con una risorsa SVG personalizzata.
Imposta l'altitudine del marcatore
Puoi impostare l'altitudine del marcatore estrudendolo e impostando l'altitudine.
Fare in modo che i marcatori rispondano agli eventi di clic e tastiera
Fai in modo che un indicatore risponda ai clic e agli eventi della tastiera aggiungendo un listener di eventi click.
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.
// ...
});
}
Impostare il comportamento di collisione tra indicatori
Specifica il comportamento di un indicatore quando entra in collisione con un altro indicatore o con un'etichetta della mappa.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});