Adicionar marcadores HTML ao mapa

Artigo
08/27/2024

Este artigo mostra como adicionar um HTML personalizado, como um arquivo de imagem, ao mapa como um marcador HTML.

Observação

Os marcadores HTML não conectam fontes de dados. Em vez disso, as informações de posição são adicionadas diretamente ao marcador e o marcador é adicionado à propriedade markers do mapa que é um HtmlMarkerManager.

Importante

Ao contrário da maioria das camadas no controle de Web do Azure Mapas que usam WebGL para renderização, os marcadores HTML usam elementos DOM tradicionais para renderização. Assim, quanto mais marcadores HTML forem adicionados a uma página, mais elementos DOM existirão. O desempenho poderá ser prejudicado após adicionar algumas centenas de marcadores HTML. Para conjuntos de dados maiores, considere o clustering de dados ou utilizar uma camada de Símbolos ou Bolhas.

Adicionar um marcador HTML

A classe HtmlMarker tem um estilo padrão. É possível personalizar o marcador, definindo as opções de cor e texto do marcador. O estilo padrão da classe de marcador HTML é um modelo de SVG que tem um espaço reservado para {color} e {text}. Defina as propriedades de cor e texto nas opções do marcador HTML para uma personalização rápida.

O código a seguir cria um marcador HTML e define a propriedade de cor como DodgerBlue e a propriedade texto como 10. Um popup é anexado ao marcador e o evento click é usado para alternar a visibilidade do popup.

//Create an HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
    color: 'DodgerBlue',
    text: '10',
    position: [0, 0],
    popup: new atlas.Popup({
        content: '<div style="padding:10px">Hello World</div>',
        pixelOffset: [0, -30]
    })
});

map.markers.add(marker);

//Add a click event to toggle the popup.
map.events.add('click',marker, () => {
    marker.togglePopup();
});

Para obter um exemplo de trabalho completo de como adicionar um marcador HTML, consulte Marcador HTML simples nos exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Código-fonte do marcador HTML simples.

Criar um marcador HTML com modelo de SVG

O padrão htmlContent de um marcador HTML é um modelo de SVG contendo as pastas de local {color} e {text}. É possível criar cadeia de caracteres de SVG personalizadas e adicionar esses mesmos espaços reservados ao SVG, de forma que a configuração das opções color e text do marcador atualize esses espaços reservados no SVG.

Para obter um exemplo de trabalho completo de como criar um modelo SVG personalizado e usá-lo com a classe HtmlMarker, confira Marcador HTML com modelo SVG personalizado nos exemplos do Azure Mapas. Ao executar este exemplo, selecione o botão no lado superior esquerdo da janela rotulada Atualizar opções de marcador para alterar as opções color e text do modelo SVG usado no HtmlMarker. Para obter o código-fonte deste exemplo, confira Marcador HTML com código-fonte de modelo SVG personalizado.

Dica

O SDK Web do Azure Mapas fornece vários modelos de imagem de SVG que podem ser usados com marcadores HTML. Para obter mais informações, confira o documento Como usar modelos de imagem.

Adicionar um marcador HTML com estilo CSS

Um dos benefícios dos marcadores HTML é que há muitas ótimas personalizações que podem ser obtidas usando CSS. No exemplo a seguir, o conteúdo do HtmlMarker consiste em HTML e CSS que criam um marcador animado que cai no local e pulsa.

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create a HTML marker and add it to the map.
    map.markers.add(new atlas.HtmlMarker({
        htmlContent: "<div><div class='pin bounce'></div><div class='pulse'></div></div>",
        position: [-0.1406, 51.5018],
        pixelOffset: [5, -18]
    }));
});

O CSS:

    <style>
        .pin {
            width: 30px;
            height: 30px;
            border-radius: 50% 50% 50% 0;
            background: #00cae9;
            position: absolute;
            transform: rotate(-45deg);
            left: 50%;
            top: 50%;
            margin: -20px 0 0 -20px;
        }

            .pin:after {
                content: "";
                width: 14px;
                height: 14px;
                margin: 8px 0 0 8px;
                background: #e6e6e6;
                position: absolute;
                border-radius: 50%;
            }

        .bounce {
            animation-name: bounce;
            animation-fill-mode: both;
            animation-duration: 1s;
        }

        .pulse {
            background: #d6d4d4;
            border-radius: 50%;
            height: 14px;
            width: 14px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 11px 0px 0px -12px;
            transform: rotateX(55deg);
            z-index: -2;
        }

            .pulse:after {
                content: "";
                border-radius: 50%;
                height: 40px;
                width: 40px;
                position: absolute;
                margin: -13px 0 0 -13px;
                animation: pulsate 1s ease-out;
                animation-iteration-count: infinite;
                opacity: 0;
                box-shadow: 0 0 1px 2px #00cae9;
                animation-delay: 1.1s;
            }

        @keyframes pulsate {
            0% {
                transform: scale(0.1, 0.1);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: scale(1.2, 1.2);
                opacity: 0;
            }
        }

        @keyframes bounce {
            0% {
                opacity: 0;
                transform: translateY(-2000px) rotate(-45deg);
            }

            60% {
                opacity: 1;
                transform: translateY(30px) rotate(-45deg);
            }

            80% {
                transform: translateY(-10px) rotate(-45deg);
            }

            100% {
                transform: translateY(0) rotate(-45deg);
            }
        }
    </style>

Para obter um exemplo de trabalho completo de como usar CSS e HTML para criar um marcador no mapa, consulte Marcador HTML com estilo CSS nos Exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Código-fonte do marcador HTML com estilo CSS.

Marcadores HTML arrastáveis

Esse exemplo mostra como tornar um marcador HTML arrastável. Marcadores HTML dão suporte a eventos drag, dragstart e dragend.

Para obter um exemplo de trabalho completo de como usar CSS e HTML para criar um marcador no mapa, consulte Marcador HTML arrastável nos Exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Código-fonte do marcador HTML arrastável.

Adicionar eventos do mouse a marcadores HTML

Para obter um exemplo de trabalho completo de como adicionar eventos do mouse e de arrastar a um marcador HTML, confira Eventos de marcador HTML nos Exemplos do Azure Mapas. Para obter o código-fonte deste exemplo, confira Código-fonte de eventos do marcador HTML.