Les repères avancés utilisent deux classes pour les définir :
La classe AdvancedMarkerElement
fournit les paramètres de base (position
,
title
et map
), et la classe PinElement
contient des options permettant d'effectuer
la personnalisation. L'extrait de code suivant montre le code permettant de créer un PinElement
,
puis appliquez-la à un repère.
// 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,
});
Dans les cartes créées en HTML, les paramètres de base d'un repère sont déclarés à l'aide de la fonction
l'élément HTML gmp-advanced-marker
; toute personnalisation qui utilise
La classe PinElement
doit être appliquée de manière programmatique. Pour ce faire, votre code doit
Récupérez les éléments gmp-advanced-marker
de la page HTML. Les éléments suivants :
l'extrait de code montre le code permettant de rechercher une collection d'éléments gmp-advanced-marker
,
puis itérez les résultats pour appliquer la personnalisation déclarée dans
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);
}
Cette page explique comment personnaliser les repères comme suit:
- Ajouter un titre
- Redimensionner le repère
- Modifier la couleur d'arrière-plan
- Modifier la couleur de la bordure
- Modifier la couleur du glyphe
- Masquer le glyphe
![Schéma représentant les différentes parties d'un repère avancé.](https://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=0000&hl=fr)
Ajouter un titre
Le texte du titre apparaît lorsque le curseur pointe sur un repère. Les lecteurs d'écran peuvent le lire.
Pour ajouter un texte de titre par programmation, utilisez AdvancedMarkerElement.title
option:
// 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", });
Pour ajouter un texte de titre à un repère créé en HTML, utilisez l'attribut 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>
Redimensionner le repère
Pour mettre à l'échelle un repère, utilisez l'option 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, });
Modifier la couleur d'arrière-plan
Utilisez l'option PinElement.background
pour modifier la couleur d'arrière-plan d'un repère :
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, });
Modifier la couleur de la bordure
Utilisez l'option PinElement.borderColor
pour modifier la couleur de la bordure d'un repère :
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, });
Modifier la couleur du glyphe
Utilisez l'option PinElement.glyphColor
pour modifier la couleur du glyphe d'un repère :
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, });
Masquer le glyphe
Définissez l'option PinElement.glyph
sur une chaîne vide pour masquer le glyphe d'un repère :
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, });
Vous pouvez aussi définir PinElement.glyphColor
sur la même valeur que PinElement.background
.
Cela a pour effet de masquer visuellement le glyphe.