HTML-jelölők hozzáadása a térképhez

Ez a cikk bemutatja, hogyan adhat hozzá egy egyéni HTML-fájlt, például egy képfájlt a térképhez HTML-jelölőként.

Megjegyzés

A HTML-jelölők nem csatlakoznak adatforrásokhoz. Ehelyett a pozícióadatok közvetlenül a jelölőhöz lesznek hozzáadva, és a jelölő hozzá lesz adva a Maps markers tulajdonsághoz, amely egy HtmlMarkerManager.

Fontos

A webes Azure Maps vezérlő legtöbb rétegétől eltérően, amelyek a WebGL-t renderelik, a HTML-jelölők hagyományos DOM-elemeket használnak a rendereléshez. Ezért minél több HTML-jelölő van hozzáadva egy laphoz, annál több DOM-elem van. Néhány száz HTML-jelölő hozzáadása után a teljesítmény csökkenhet. Nagyobb adathalmazok esetén fontolja meg az adatok fürtözését, vagy egy szimbólum- vagy buborékréteg használatát.

HTML-jelölő hozzáadása

A HtmlMarker osztály alapértelmezett stílussal rendelkezik. A jelölőt testre szabhatja a jelölő szín- és szövegbeállításainak beállításával. A HTML-jelölőosztály alapértelmezett stílusa egy SVG-sablon, amely egy és {text} egy {color} helyőrzővel rendelkezik. A gyors testreszabás érdekében adja meg a HTML-jelölő beállításaiban a szín- és szövegtulajdonságokat.

Az alábbi kód létrehoz egy HTML-jelölőt, és beállítja a színtulajdonságot a értékre DodgerBlue , a szövegtulajdonságot pedig a értékre 10. A jelölőhöz egy előugró ablak van csatolva, és click az esemény az előugró ablak láthatóságának váltására szolgál.

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

A HTML-jelölők hozzáadásának teljes munkamintájáért lásd: Egyszerű HTML-jelölő a Azure Maps mintákban. A minta forráskódját az Egyszerű HTML-jelölő forráskódja című témakörben találja.

SVG-sablonalapú HTML-jelölő létrehozása

A Html-jelölők alapértelmezett értéke htmlContent egy SVG-sablon, amelyben a helymappák {color} és {text} azok is szerepelnek. Létrehozhat egyéni SVG-sztringeket, és hozzáadhatja ezeket a helyőrzőket az SVG-hez úgy, hogy a color jelölő és text a beállítások megadásával frissítse ezeket a helyőrzőket az SVG-ben.

Az egyéni SVG-sablon létrehozásának és a HtmlMarker osztálysal való használatának teljes munkamintáját lásd: HTML-jelölő egyéni SVG-sablonnal a Azure Maps-mintákban. A minta futtatásakor válassza az ablak bal felső sarkában található , Update Marker Options (Frissítési jelölő beállításai ) feliratú gombot a color HtmlMarkerben használt SVG-sablon és text beállítások módosításához. A minta forráskódját lásd: HTML-jelölő egyéni SVG-sablon forráskóddal.

Tipp

A Azure Maps webes SDK számos SVG-képsablont biztosít, amelyek HTML-jelölőkkel használhatók. További információt a Képsablonok használata című dokumentumban talál.

CSS stílusú HTML-jelölő hozzáadása

A HTML-jelölők egyik előnye, hogy számos nagyszerű testreszabás érhető el a CSS használatával. A következő mintában a HtmlMarker tartalma HTML-ből és CSS-ből áll, amely egy animált tűt hoz létre, amely a helyére és impulzusaiba esik.

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

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

A CSS és a HTML használatával a térképen egy jelölő létrehozásához használható teljes munkamintáért lásd: CSS stílusú HTML-jelölő a Azure Maps mintákban. A minta forráskódját lásd: CSS stílusú HTML-jelölő forráskódja.

Húzható HTML-jelölők

Ez a minta bemutatja, hogyan lehet egy HTML-jelölőt húzhatóvá tenni. A HTML-jelölők támogatják draga , dragstartés dragend az eseményeket.

A CSS és a HTML használatával jelölők térképen való létrehozásához használható teljes munkamintáért lásd: Húzható HTML-jelölő a Azure Maps mintákban. A minta forráskódját lásd: Húzható HTML-jelölő forráskódja.

Egéresemények hozzáadása HTML-jelölőkhöz

Az egérrel és az események HTML-jelölőhöz való húzásával kapcsolatos teljes munkamintáért lásd: HTML-jelölő események a Azure Maps-mintákban. A minta forráskódját a HTML-jelölő események forráskódja című témakörben találja.

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

HtmlMarker

HtmlMarkerOptions

HtmlMarkerManager

A térképekhez további kód példákat a következő cikkekben talál:

Rendszerképsablonok használata

Szimbólumréteg hozzáadása

Buborékréteg hozzáadása