Personalizzazione di base degli indicatori

L'API Markers per le mappe 3D utilizza due classi per definire i marcatori: la classe 3DMarkerElement fornisce i parametri di base (position, label e map), mentre la classe PinElement contiene opzioni per un'ulteriore personalizzazione.

Per aggiungere indicatori a una mappa, devi prima caricare la libreria degli indicatori, che fornisce le classi 3DMarkerElement e PinElement.

Il seguente snippet mostra il codice per creare un nuovo PinElement, quindi applicarlo a un indicatore:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Nelle mappe create utilizzando HTML, i parametri di base per un indicatore vengono dichiarati utilizzando l'elemento HTML gmp-marker-3d; qualsiasi personalizzazione che utilizza la classe PinElement deve essere applicata in modo programmatico. A questo scopo, il codice deve recuperare gli elementi gmp-marker-3d dalla pagina HTML. Il seguente snippet mostra il codice per interrogare una raccolta di elementi gmp-marker-3d, quindi scorrere i risultati per applicare la personalizzazione dichiarata in gmp-marker-3d.

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

Questa pagina mostra come personalizzare i marcatori nei seguenti modi:

Scala l'indicatore

Per scalare un marcatore, utilizza l'opzione scale:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Modificare il colore dello sfondo

Utilizza l'opzione PinElement.background per modificare il colore di sfondo di un indicatore:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Modificare il colore del bordo

Utilizza l'opzione PinElement.borderColor per modificare il colore del bordo di un indicatore:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Modificare il colore del glifo

Utilizza l'opzione PinElement.glyphColor per modificare il colore del glifo di un indicatore:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

Aggiungere testo a un glifo

Utilizza l'opzione PinElement.glyph per sostituire il glifo predefinito con un carattere di testo. Il glifo di testo di PinElement viene scalato con PinElement e il suo colore predefinito corrisponde a glyphColor predefinito di PinElement:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

Modificare l'altitudine

Utilizza l'opzione Marker3DElement.position.altitude combinata con Marker3DElement.altitudeMode e Marker3DElement.extruded per modificare l'altitudine dell'indicatore e aggiungere una linea estrusa tra il terreno e l'indicatore:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});

Rimuovere i marcatori

Utilizza Marker3DElement.remove() per rimuovere i segnaposto dalla mappa:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

Passaggi successivi