Haritaya HTML işaretçileri ekleme

Bu makalede, haritaya HTML İşaretçisi olarak görüntü dosyası gibi özel bir HTML'nin nasıl ekleneceği gösterilmektedir.

HTML işaretçisi ekleme

HtmlMarker sınıfının varsayılan stili vardır. İşaretçinin renk ve metin seçeneklerini ayarlayarak işaretçiyi özelleştirebilirsiniz. HTML işaretçi sınıfının varsayılan stili ve {text} yer tutucusu olan bir {color} SVG şablonudur. Hızlı özelleştirme için HTML işaretçisi seçeneklerinde renk ve metin özelliklerini ayarlayın.

Aşağıdaki kod bir HTML işaretçisi oluşturur ve renk özelliğini DodgerBlue olarak, metin özelliğini 10olarak ayarlar. İşaretçiye bir açılır pencere eklenir ve click açılan pencere görünürlüğünü değiştirmek için olay kullanılır.

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

HTML işaretçisinin nasıl ekleneceğini gösteren eksiksiz bir çalışma örneği için, Azure Haritalar Örnekleri'ndeki Basit HTML İşaretçisi'ne bakın. Bu örneğin kaynak kodu için bkz . Basit HTML İşaretçisi kaynak kodu.

SVG şablonlu HTML işaretçisi oluşturma

Html işaretçisinin varsayılanı htmlContent , klasör yerleştir {color} ve {text} içinde bulunan bir SVG şablonudur. Özel SVG dizeleri oluşturabilir ve işaretleyicinin color ve text seçeneklerinin ayarlanması SVG'nizdeki bu yer tutucuları güncelleştiren aynı yer tutucuları SVG'nize ekleyebilirsiniz.

Özel bir SVG şablonu oluşturma ve HtmlMarker sınıfıyla kullanma hakkında eksiksiz bir çalışma örneği için, Azure Haritalar Örnekleri'ndeki Özel SVG Şablonu ile HTML İşaretleyicisi'ne bakın. Bu örneği çalıştırırken, HtmlMarker'da kullanılan SVG şablonundaki ve text seçeneklerini değiştirmek color için pencerenin sol üst tarafındaki İşaretçi Seçeneklerini Güncelleştir etiketli düğmeyi seçin. Bu örneğin kaynak kodu için bkz . Özel SVG Şablonu kaynak koduna sahip HTML İşaretçisi.

CSS stilinde HTML işaretçisi ekleme

HTML işaretçilerinin avantajlarından biri, CSS kullanılarak elde edilebilecek birçok harika özelleştirme olmasıdır. Aşağıdaki örnekte, HtmlMarker'ın içeriği, yerine düşen ve darbeleri gösteren animasyonlu bir pin oluşturan HTML ve CSS'yi içerir.

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

Haritada bir işaretçi oluşturmak için CSS ve HTML'nin nasıl kullanılacağına ilişkin eksiksiz bir çalışma örneği için, Azure Haritalar Örnekleri'ndeki CSS Stilli HTML İşaretçisi'ne bakın. Bu örneğin kaynak kodu için bkz . CSS Stilli HTML İşaretçisi kaynak kodu.

Sürüklenebilir HTML işaretçileri

Bu örnekte HTML işaretçisini sürüklenebilir hale getirme gösterilmektedir. HTML işaretçileri , dragstartve dragend olaylarını desteklerdrag.

Haritada bir işaretçi oluşturmak için CSS ve HTML'nin nasıl kullanılacağına ilişkin eksiksiz bir çalışma örneği için Azure Haritalar Örnekleri'ndeki Sürüklenebilir HTML İşaretçisi bölümüne bakın. Bu örneğin kaynak kodu için bkz . Sürüklenebilir HTML İşaretçisi kaynak kodu.

HTML işaretçilerine fare olayları ekleme

Bir HTML işaretçisine fare ekleme ve olayları sürükleme hakkında eksiksiz bir çalışma örneği için Azure Haritalar Örnekleri'ndeki HTML İşaretçisi olayları bölümüne bakın. Bu örneğin kaynak kodu için bkz . HTML İşaretçisi olayları kaynak kodu.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Haritalarınıza eklenecek diğer kod örnekleri için aşağıdaki makalelere bakın: