Repères

Utilisez des repères pour attirer l'attention d'un utilisateur sur un lieu sur une carte. Ce guide explique comment utiliser et personnaliser des repères dans les cartes 3D. Vous pouvez contrôler la forme, la taille et la couleur des repères, ainsi que l'altitude à laquelle ils apparaissent. L'exemple suivant illustre un repère de base :

Dans Maps JavaScript, les cartes 3D fournissent deux classes de repères distinctes, chacune optimisée pour des utilisations spécifiques. Le tableau suivant présente les différences et les compromis entre les deux classes disponibles :

Capacité MarkerElement Marker3DElement
Personnalisation Élevé (compatible avec les éléments HTML personnalisés, les API d'animation de base, etc.) Faible (moins personnalisable)
Performances Performances d'interaction plus faibles (chute de la fréquence d'images avec un grand nombre de repères) Performances d'interaction améliorées (optimisées pour l'affichage de grands ensembles de données)
Capacité recommandée Performances d'interaction fiables jusqu'à environ 1 000 repères Recommandé pour gérer plus de 1 000 repères

Personnaliser la couleur, la taille et l'icône

Personnalisez la couleur et la taille de l'arrière-plan, du glyphe et de la bordure du repère par défaut.

Repères personnalisés

Remplacez l'icône par défaut du repère par une ressource SVG personnalisée.

Repères avec des graphiques

Définir l'altitude du repère

Vous pouvez définir l'altitude d'un repère en l'extrudant et en définissant l'altitude.

Repère extrudé

Configurer les repères pour qu'ils répondent aux événements de clic et de clavier

Ajoutez un écouteur d'événements click pour que le repère puisse répondre aux événements de clic et de clavier.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Définir le comportement en cas de collision de repères

Spécifiez comment le repère doit se comporter en cas de collision avec un autre repère ou libellé de carte.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Performances des repères

Les repères HTML personnalisés (MarkerElement) offrent des performances inférieures à celles des repères 3D standards (Marker3DElement). Pour les applications comportant plus de 1 000 repères, la classe Marker3dElement est fortement recommandée pour garantir des performances optimales.

Étape suivante