Lägga till HTML-markörer på kartan

Den här artikeln visar hur du lägger till en anpassad HTML-kod, till exempel en bildfil på kartan som en HTML-markör.

Lägga till en HTML-markör

HtmlMarker-klassen har ett standardformat. Du kan anpassa markören genom att ange färg- och textalternativen för markören. Standardformatet för HTML-markörklassen är en SVG-mall som har en {color} och en {text} platshållare. Ange färg- och textegenskaperna i HTML-marköralternativen för en snabb anpassning.

Följande kod skapar en HTML-markör och anger färgegenskapen till DodgerBlue och textegenskapen till 10. Ett popup-fönster är kopplat till markören och click händelsen används för att växla synligheten för popup-fönstret.

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

Ett fullständigt arbetsexempel på hur du lägger till en HTML-markör finns i Enkel HTML-markör i Azure Maps-exempel. Källkoden för det här exemplet finns i Enkel HTML-markörkällkod.

Skapa SVG-mallad HTML-markör

Standardvärdet htmlContent för en HTML-markör är en SVG-mall med platsmappar {color} och {text} i den. Du kan skapa anpassade SVG-strängar och lägga till samma platshållare i din SVG så att inställningsalternativen color och text för markören uppdaterar dessa platshållare i din SVG.

Ett fullständigt arbetsexempel på hur du skapar en anpassad SVG-mall och använder den med klassen HtmlMarker finns i HTML-markör med anpassad SVG-mall i Azure Maps-exempel. När du kör det här exemplet väljer du knappen längst upp till vänster i fönstret med etiketten Uppdateringsmarköralternativ för att ändra color alternativen och text från SVG-mallen som används i HtmlMarker. Källkoden för det här exemplet finns i HTML-markör med anpassad SVG-mallkällkod.

Lägg till en HTML-markör med CSS-format

En av fördelarna med HTML-markörer är att det finns många bra anpassningar som kan uppnås med hjälp av CSS. I följande exempel består innehållet i HtmlMarker av HTML och CSS som skapar en animerad nål som placeras och pulserar.

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

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

Ett fullständigt arbetsexempel på hur du använder CSS och HTML för att skapa en markör på kartan finns i CSS-formaterad HTML-markör i Azure Maps-exempel. Källkoden för det här exemplet finns i CSS-formaterad HTML-markörkällkod.

Dragningsbara HTML-markörer

Det här exemplet visar hur du gör en HTML-markör som kan dras. HTML-markörer stöder drag, dragstartoch dragend händelser.

Ett fullständigt arbetsexempel på hur du använder CSS och HTML för att skapa en markör på kartan finns i Drabar HTML-markör i Azure Maps-exempel. Källkoden för det här exemplet finns i Drabar HTML-markörkällkod.

Lägga till mushändelser i HTML-markörer

Ett fullständigt arbetsexempel på hur du lägger till mus och drar händelser till en HTML-markör finns i HTML-markörhändelser i Azure Maps-exempel. Källkoden för det här exemplet finns i källkoden för HTML-markörhändelser.

Nästa steg

Läs mer om de klasser och metoder som används i den här artikeln:

Fler kodexempel att lägga till i dina kartor finns i följande artiklar: