Marcadores

Use marcadores para chamar a atenção do usuário para um local no mapa. Neste guia, mostramos 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 marcador distintas, cada uma otimizada para usos específicos. A tabela a seguir mostra as diferenças e as vantagens e desvantagens entre as duas classes disponíveis:

Capacidade MarkerElement Marker3DElement
Personalização Alta (oferece suporte a elementos HTML personalizados, APIs de animação principais etc.) Baixo (menos personalizável)
Desempenho Menor desempenho de interação (quedas de FPS com um grande número de marcadores) Maior desempenho de interação (otimizado para renderizar grandes conjuntos de dados)
Capacidade recomendada Desempenho de interação confiável com até cerca de 1.000 marcadores Recomendado para lidar com mais de mil marcadores

Personalizar cores personalizadas, escala e imagem do ícone

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

Marcadores personalizados

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

Marcadores com imagens

Definir a altitude do marcador

Para definir a altitude do marcador, faça a extrusão dele 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 o desempenho ideal.

Próxima etapa