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 des cartes 3D. Vous pouvez contrôler la forme, la taille et la couleur des repères, ainsi que l'altitude à laquelle ils s'affichent. L'exemple suivant montre un repère de base :

Maps JavaScript 3D Maps fournit 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ée (compatible avec les éléments HTML personnalisés, les API d'animation de base, etc.) Faible (moins personnalisable)
Performances Performances d'interaction inférieures (les FPS diminuent avec un grand nombre de repères) Performances d'interaction supérieures (optimisées pour le rendu de grands ensembles de données)
Capacité recommandée Performances d'interaction fiables jusqu'à environ 1 000 repères Recommandé pour la gestion de plus de 1 000 repères

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

Personnalisez la couleur d'arrière-plan, le glyphe, la couleur de bordure et la taille 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 du 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

Configurez un repère pour qu'il réponde aux clics et aux événements de clavier en ajoutant un écouteur d'événements click.

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