Gli indicatori avanzati utilizzano due classi per definire gli indicatori: la classe AdvancedMarkerElement
fornisce i parametri di base (position
, title
e map
), mentre la classe PinElement
contiene opzioni per un'ulteriore personalizzazione. Il seguente snippet mostra il codice per creare un nuovo PinElement
e
applicarlo a un indicatore.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Nelle mappe create utilizzando HTML, i parametri di base di un indicatore vengono dichiarati utilizzando l'elemento HTML gmp-advanced-marker
; qualsiasi personalizzazione che utilizza la classe PinElement
deve essere applicata in modo programmatico. A questo scopo, il tuo codice deve recuperare gli elementi gmp-advanced-marker
dalla pagina HTML. Il seguente snippet mostra il codice su cui eseguire una query per una raccolta di elementi gmp-advanced-marker
, quindi esegui l'iterazione dei risultati per applicare la personalizzazione dichiarata in PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Questa pagina mostra come personalizzare gli indicatori nei seguenti modi:
- Aggiungere il testo del titolo
- Ridimensionare l'indicatore
- Cambiare il colore dello sfondo
- Modificare il colore del bordo
- Cambiare il colore del glifo
- Nascondere il glifo
Aggiungi il testo del titolo
Il titolo viene visualizzato quando il cursore passa il mouse sopra un indicatore. Il testo del titolo è leggibile dagli screen reader.
Per aggiungere il testo del titolo in modo programmatico, utilizza l'opzione AdvancedMarkerElement.title
:
TypeScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
JavaScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
Per aggiungere il testo del titolo a un indicatore creato utilizzando HTML, utilizza l'attributo title
:
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
Ridimensionare l'indicatore
Per ridimensionare un indicatore, utilizza l'opzione scale
.
TypeScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
JavaScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
Modificare il colore dello sfondo
Utilizza l'opzione PinElement.background
per modificare il colore di sfondo di un indicatore:
TypeScript
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
JavaScript
// Change the background color.
const pinBackground = new PinElement({
background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
Modifica il colore del bordo
Utilizza l'opzione PinElement.borderColor
per modificare il colore del bordo di un indicatore:
TypeScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
JavaScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
Cambia il colore del glifo
Utilizza l'opzione PinElement.glyphColor
per modificare il colore del glifo di un indicatore:
TypeScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
JavaScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
Nascondi il glifo
Imposta l'opzione PinElement.glyph
su una stringa vuota per nascondere il glifo di un indicatore:
TypeScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
In alternativa, imposta PinElement.glyphColor
sullo stesso valore di PinElement.background
.
Questo ha l'effetto di nascondere visivamente il glifo.
Passaggi successivi:
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2024-05-14 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Mancano le informazioni di cui ho bisogno"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Troppo complicato/troppi passaggi"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsoleti"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema di traduzione"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema relativo a esempi/codice"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Altra"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile da capire"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Il problema è stato risolto"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Altra"
}]