Marcadores

Use marcadores para chamar a atenção do usuário para um local no mapa. Este guia demonstra como usar e personalizar marcadores em mapas 3D. Você pode controlar a forma, o tamanho e a cor dos marcadores, além da altitude em que eles aparecem. O exemplo a seguir mostra um marcador básico:

Os mapas 3D na API Maps JavaScript oferecem duas classes de marcadores distintas, cada uma otimizada para usos específicos. A tabela a seguir mostra as diferenças e compensações entre as duas classes disponíveis:

Capacidade MarkerElement Marker3DElement
Personalização Alto (compatível com elementos HTML personalizados, APIs de animação principais etc.) Baixa (menos personalizável)
Desempenho Desempenho de interação mais baixo (quedas de FPS com um grande número de marcadores) Melhor desempenho de interação (otimizado para renderizar grandes conjuntos de dados)
Capacidade recomendada Desempenho confiável de interação com até 1.000 marcadores Recomendado para lidar com mais de 1.000 marcadores

Personalizar cor, escala e imagem do ícone

Personalize a cor do plano de fundo, do glifo, da borda e o tamanho do marcador padrão.

Marcadores personalizados

Substitua o ícone de marcador padrão por um recurso SVG personalizado.

Marcadores com gráficos

Definir a altitude do marcador

Para definir a altitude do marcador, extrude-o e defina a altitude.

Marcador extrudado

Como os marcadores podem responder a eventos de clique e de teclado

Para que um marcador responda a eventos de clique e de teclado, adicione um listener de eventos click.

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

Definir o comportamento em caso de conflito do marcador

Especifique como um marcador deve se comportar quando entrar em conflito com outro marcador ou rótulo de mapa.

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

Performance do marcador

Os marcadores HTML personalizados (MarkerElement) oferecem desempenho inferior aos marcadores 3D padrão (Marker3DElement). Para aplicativos com mais de 1.000 marcadores, é altamente recomendável usar a classe Marker3dElement para garantir a performance ideal.

Próxima etapa