Panoramica degli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Utilizza gli indicatori per visualizzare singole posizioni su una mappa. Questa guida illustra come utilizzare indicatori avanzati. Con indicatori avanzati che puoi creare e personalizzare gli indicatori del rendimento e rendi accessibili indicatori che rispondono agli eventi di clic DOM e input da tastiera. Per una personalizzazione ancora più completa, gli indicatori avanzati supportano l'uso di HTML e CSS personalizzati inclusa la possibilità di creare indicatori completamente personalizzati. Per applicazioni 3D puoi controllare l'altitudine alla quale viene visualizzato un indicatore. Gli indicatori avanzati sono supportati sia sulle mappe raster che sulle mappe vettoriali (anche se alcuni elementi non sono disponibili nelle mappe raster). Per utilizzare gli indicatori avanzati, è necessario un ID mappa (è possibile utilizzare DEMO_MAP_ID).

Iniziare a utilizzare gli indicatori avanzati

Personalizza colore, scala e immagine dell'icona

Personalizza lo sfondo, il glifo e il bordo dell'indicatore predefinito colore e regolare la dimensione dell'indicatore.

Uno screenshot che mostra alcuni indicatori personalizzati.

Sostituisci l'icona dell'indicatore predefinito con un'immagine SVG o PNG personalizzata.

Uno screenshot che mostra indicatori SVG personalizzati.

Creare indicatori HTML personalizzati

Utilizza HTML e CSS personalizzati per creare elementi visivamente distintivi indicatori interattivi e creare animazioni.

Uno screenshot che mostra un indicatore HTML personalizzato.

Fai in modo che gli indicatori rispondano agli eventi di clic e tastiera

Aggiungi un indicatore per rispondere ai clic e agli eventi tastiera Listener di eventi click.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

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

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Imposta l'altitudine degli indicatori e il comportamento della collisione

Imposta l'altitudine di un indicatore in modo che venga visualizzato correttamente con Elementi di mappa 3D e specifica il comportamento di un indicatore in caso di collisione con un altro indicatore o un'etichetta di mappa. L'altitudine dell'indicatore è supportata solo sulle mappe vettoriali.

Uno screenshot che mostra un indicatore con la regolazione dell'altitudine.

Passaggio successivo