Dodawanie znaczników HTML do mapy

Artykuł
08/05/2024

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

Uwaga

Znaczniki HTML nie łączą się ze źródłami danych. Zamiast tego informacje o pozycji są dodawane bezpośrednio do znacznika, a znacznik jest dodawany do właściwości maps markers , która jest elementem HtmlMarkerManager.

Ważne

W przeciwieństwie do większości warstw w kontrolce internetowej usługi Azure Maps, które używają języka WebGL do renderowania, znaczniki HTML używają tradycyjnych elementów DOM do renderowania. W związku z tym więcej znaczników HTML dodanych do strony, tym więcej elementów modelu DOM istnieje. Wydajność może ulec pogorszeniu po dodaniu kilkuset znaczników HTML. W przypadku większych zestawów danych rozważ klastrowanie danych lub użycie warstwy symbolu lub bąbelka.

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 click zdarzenie służy do przełączania widoczności wyskakującego okienka.

//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.

Zrzut ekranu przedstawiający mapę świata z prostym elementem HtmlMarker.

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 pliku SVG, tak aby ustawienie color opcji i text znacznika zaktualizowało 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 Html Marker with Custom SVG Template source code (Znacznik HTML z niestandardowym kodem źródłowym szablonu SVG).

Zrzut ekranu przedstawiający mapę świata z niestandardowym szablonem SVG używanym z klasą HtmlMarker. Zawiera on opcje znacznika aktualizacji z etykietą przycisk, który po wybraniu zmienia opcje koloru i tekstu z szablonu SVG używanego w kodzie HtmlMarker.

Napiwek

Internetowy zestaw SDK usługi Azure Maps udostępnia kilka szablonów obrazów SVG, których można używać ze znacznikami HTML. Aby uzyskać więcej informacji, zobacz dokument How to use image templates (Jak używać szablonów obrazów ).

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 animowany numer PIN, który przechodzi w miejsce i impulsy.

//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.

Zrzut ekranu przedstawiający znacznik 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ą dragzdarzenia , dragstarti dragend .

Aby zapoznać się z kompletnym roboczym przykładem użycia arkuszy CSS i HTML do utworzenia znacznika na mapie, zobacz Przeciąganie znacznika HTML w przykładach usługi Azure Maps. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Przeciąganie kodu źródłowego znacznika HTML.

Zrzut ekranu przedstawiający mapę Stany Zjednoczone z przeciągniętym żółtym kciukiem, aby zademonstrować przeciągany znacznik HTML z możliwością 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.

Zrzut ekranu przedstawiający mapę świata z elementem HtmlMarker i listą zdarzeń HtmlMarker, które stają się wyróżnione na zielono, gdy to zdarzenie zostanie wyzwolone.