Dodawanie znaczników HTML do mapy

W tym artykule pokazano, jak dodać niestandardowy kod HTML, taki jak plik obrazu do mapy jako znacznik HTML.

Dodawanie znacznika HTML

Klasa HtmlMarker ma domyślny styl. Znacznik można dostosować, ustawiając opcje koloru i tekstu znacznika. Domyślnym stylem klasy znacznika HTML jest szablon SVG, który ma {color} symbol zastępczy i {text} . Ustaw właściwości koloru i tekstu w opcjach znacznika HTML w celu szybkiego dostosowania.

Poniższy kod tworzy znacznik HTML i ustawia właściwość color na DodgerBlue i właściwość text na 10. Wyskakujące okienko jest dołączone do znacznika, a z pomocą zdarzenia click można przełączać jego widoczność.

//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();
});

Aby zapoznać się z kompletnym roboczym przykładem dodawania znacznika HTML, zobacz Simple HTML Marker in the Azure Maps Samples (Proste znaczniki HTML w przykładach usługi Azure Maps). Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Prosty kod źródłowy znacznika HTML.

Tworzenie znacznika HTML szablonu SVG

Domyślnym htmlContent znacznikiem html jest szablon SVG z folderami {color} zastępczymi i {text} w nim. Możesz utworzyć niestandardowe ciągi SVG i dodać te same symbole zastępcze do Twojego SVG, tak aby ustawienia opcji color i text znacznika zaktualizowały te symbole zastępcze w SVG.

Aby zapoznać się z kompletnym roboczym przykładem tworzenia niestandardowego szablonu SVG i używania go z klasą HtmlMarker, zobacz Znacznik HTML z niestandardowym szablonem SVG w przykładach usługi Azure Maps. Podczas uruchamiania tego przykładu wybierz przycisk w lewej górnej części okna z etykietą Opcje znacznika aktualizacji, aby zmienić color opcje i text z szablonu SVG używanego w narzędziu HtmlMarker. Aby uzyskać kod źródłowy dla tego przykładu, zobacz kod źródłowy znacznika HTML z niestandardowym szablonem SVG.

Dodawanie znacznika HTML w stylu CSS

Jedną z zalet znaczników HTML jest to, że istnieje wiele wielkich dostosowań, które można osiągnąć za pomocą css. W poniższym przykładzie zawartość elementu HtmlMarker składa się z kodu HTML i CSS, który tworzy animowaną pinezkę, która opada na miejsce i pulsuje.

//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]
    }));
});

Arkusz 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>

Aby zapoznać się z kompletnym roboczym przykładem użycia arkuszy CSS i HTML do utworzenia znacznika na mapie, zobacz CSS Styled HTML Marker in the Azure Maps Samples (Znacznik HTML w stylach CSS w przykładach usługi Azure Maps). Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Kod źródłowy znaczników HTML w stylu CSS.

Znaczniki HTML z możliwością przeciągania

W tym przykładzie pokazano, jak przeciągać znacznik HTML. Znaczniki HTML obsługują drag, dragstart i dragend zdarzenia.

Aby zapoznać się z kompletnym przykładem wykorzystania CSS i HTML do utworzenia znacznika na mapie, zobacz Przeciągalny znacznik HTML w przykładach Azure Maps. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Kod źródłowy znacznika HTML przeciągania.

Dodawanie zdarzeń myszy do znaczników HTML

Aby zapoznać się z kompletnym roboczym przykładem dodawania zdarzeń myszy i przeciągania zdarzeń do znacznika HTML, zobacz Zdarzenia znacznika HTML w przykładach usługi Azure Maps. Aby uzyskać kod źródłowy dla tego przykładu, zobacz kod źródłowy zdarzeń znaczników HTML.

Następne kroki

Dowiedz się więcej o klasach i metodach używanych w tym artykule:

Aby uzyskać więcej przykładów kodu do dodania do map, zobacz następujące artykuły: