Přidání značek HTML do mapy

V tomto článku se dozvíte, jak přidat vlastní kód HTML, například soubor obrázku, do mapy jako značku HTML.

Poznámka

Značky HTML se nepřipojí ke zdrojům dat. Místo toho jsou informace o umístění přidány přímo do značky a značka je přidána do maps markers vlastnost, což je HtmlMarkerManager.

Důležité

Na rozdíl od většiny vrstev v ovládacím prvku Azure Maps Web, které k vykreslování používají WebGL, používají značky HTML pro vykreslování tradiční prvky DOM. Čím více značek HTML se tedy přidá na stránku, tím více prvků DOM existuje. Po přidání několika stovek značek HTML se může snížit výkon. U větších datových sad zvažte buď seskupení dat, nebo použití vrstvy symbolů nebo bublin.

Přidání značky HTML

HtmlMarker Třída má výchozí styl. Značku můžete přizpůsobit nastavením možností barvy a textu značky. Výchozí styl třídy značky HTML je šablona SVG, která má {color} zástupný symbol a {text} . Nastavte vlastnosti barvy a textu v možnostech značky HTML pro rychlé přizpůsobení.

Následující kód vytvoří značku HTML a nastaví vlastnost color na DodgerBlue a vlastnost text na 10. Ke značce je připojeno automaticky otevírané okno a click událost se používá k přepnutí viditelnosti automaticky otevíraného okna.

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

Kompletní ukázku přidání značky HTML najdete v tématu Jednoduchá značka HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód jednoduché značky HTML.

Vytvoření značky HTML s šablonou SVG

Výchozí hodnota htmlContent značky HTML je šablona SVG s umístěním složek {color} a {text} v ní. Můžete vytvořit vlastní řetězce SVG a přidat tyto zástupné symboly do svg tak, aby nastavení color možností a text značky aktualizovalo tyto zástupné symboly ve formátu SVG.

Kompletní funkční ukázku, jak vytvořit vlastní šablonu SVG a použít ji s třídou HtmlMarker, najdete v tématu Značky HTML s vlastní šablonou SVG v Azure Maps Ukázky. Při spuštění této ukázky vyberte tlačítko v levém horním rohu okna s názvem Možnosti značky aktualizace a změňte color možnosti a text ze šablony SVG použité v HtmlMarker. Zdrojový kód pro tuto ukázku najdete v tématu Značka HTML se zdrojovým kódem vlastní šablony SVG.

Tip

Sada AZURE MAPS Web SDK poskytuje několik šablon obrázků SVG, které lze použít se značkami HTML. Další informace najdete v dokumentu Jak používat šablony obrázků .

Přidání značky HTML ve stylu CSS

Jednou z výhod značek HTML je, že existuje mnoho skvělých přizpůsobení, které lze dosáhnout pomocí šablon stylů CSS. V následující ukázce se obsah HtmlMarker skládá z HTML a CSS, které vytvářejí animovaný špendlík, který padá na místo a pulsy.

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

Šablony stylů 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>

Kompletní funkční ukázku použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v tématu Značka HTML se stylem CSS v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód značky HTML ve stylu CSS.

Přetahovatelné značky HTML

Tato ukázka ukazuje, jak nastavit přetažení značky HTML. Značky HTML podporují dragudálosti , dragstarta dragend .

Kompletní funkční ukázku použití šablon stylů CSS a HTML k vytvoření značky na mapě najdete v tématu Přetahovatelná značka HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód značky HTML s možnostmi přetažení.

Přidání událostí myši do značek HTML

Kompletní funkční ukázku přidání událostí myši a přetažení do značky HTML najdete v tématu Události značky HTML v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód událostí značky HTML.

Další kroky

Další informace o třídách a metodách použitých v tomto článku:

HtmlMarker

HtmlMarkerOptions

HtmlMarkerManager

Další příklady kódu pro přidání do map najdete v následujících článcích:

Používání šablon obrázků

Přidání vrstvy symbolů

Přidání vrstvy bublin