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

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

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 helyőrzővel {color} {text} rendelkezik. A gyors testreszabáshoz a HTML-jelölő beállításaiban adja meg 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 DodgerBlue , a szövegtulajdonságot pedig a következőre 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 tekintse meg az Egyszerű HTML-jelölőt az Azure Maps-mintákban. A minta forráskódját az Egyszerű HTML-jelölő forráskódja tartalmazza.

SVG-sablonnal rendelkező HTML-jelölő létrehozása

A Html-jelölők alapértelmezett értéke htmlContent egy SVG-sablon, amelyben a helymappák és {text} a benne lévő mappák {color} láthatók. Létrehozhat egyéni SVG-sztringeket, és hozzáadhatja ezeket a helyőrzőket az SVG-hez, így a color jelölő beállításai és text beállításai frissíthetik ezeket a helyőrzőket az SVG-ben.

Az egyéni SVG-sablon létrehozásának és a HtmlMarker-osztályban való használatának teljes munkamintáját az Azure Maps-mintákban található egyéni SVG-sablonnal rendelkező HTML-jelölőben tekintheti meg. A minta futtatásakor az ablak bal felső sarkában lévő, Frissítésjelölő beállításai feliratú gombra kattintva módosíthatja a color HtmlMarkerben használt SVG-sablon beállításait és text beállításait. A minta forráskódját lásd : HTML Marker with Custom SVG Template source code.

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 létrehoz egy animált tűt, 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 jelölők térképen való létrehozására vonatkozó teljes munkamintát az Azure Maps-minták CSS stílusú HTML-jelölőjében talál. A minta forráskódját a CSS stílusú HTML-jelölő forráskódja tartalmazza.

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 dragaz eseményeket dragstartés dragend az eseményeket.

A CSS és a HTML használatával egy jelölő térképen való létrehozására vonatkozó teljes munkamintát az Azure Maps-minták húzható HTML-jelölője című témakörben talál. 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ér hozzáadásának és az események HTML-jelölőbe húzásának teljes munkamintáját az Azure Maps-minták HTML-jelölő eseményei című témakörben találhatja meg. A minta forráskódját a HTML-jelölő események forráskódja tartalmazza.

Következő lépések

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

A térképekhez hozzáadandó további kód példákért tekintse meg az alábbi cikkeket: