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.

Not

HTML İşaretçileri veri kaynaklarına bağlanmaz. Bunun yerine konum bilgileri doğrudan işaretçiye eklenir ve işaretçi bir HtmlMarkerManager olan maps markers özelliğine eklenir.

Önemli

İşleme için WebGL kullanan Azure Haritalar Web denetimindeki çoğu katmanın aksine, HTML İşaretçileri işleme için geleneksel DOM öğelerini kullanır. Bu nedenle, sayfaya ne kadar çok HTML işaretçisi eklenirse, o kadar çok DOM öğesi olur. Birkaç yüz HTML işaretçisi eklendikten sonra performans düşebilir. Daha büyük veri kümeleri için verilerinizi kümeleme veya Sembol veya Kabarcık katmanı kullanmayı göz önünde bulundurun.

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" ve metin özelliğini "10" olarak 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();
});

Yukarıdaki işlevselliğin çalışan kod örneğinin tamamı aşağıda verilmiştir.


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

Html işaretçisinin varsayılanı htmlContent , klasör yerleştirme {color} ve {text} yerleştirme içeren bir SVG şablonudur. Özel SVG dizeleri oluşturabilir ve bu yer tutucuları SVG'nize ekleyebilirsiniz; böylece işaretçinin color ve text seçeneklerini ayarlamak SVG'nizdeki bu yer tutucuları güncelleştirir.


İpucu

Azure Haritalar web SDK'sı, HTML işaretçileriyle kullanılabilecek çeşitli SVG görüntü şablonları sağlar. Daha fazla bilgi için Görüntü şablonlarını kullanma belgesine bakın.

CSS stilinde HTML işaretçisi ekleme

HTML işaretleyicilerinin avantajlarından biri, CSS kullanılarak elde edilebilecek birçok harika özelleştirme olmasıdır. Bu örnekte HtmlMarker'ın içeriği, yerine düşen ve darbe alan animasyonlu bir pin oluşturan HTML ve CSS'yi içerir.


Sürüklenebilir HTML işaretçileri

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


HTML işaretçilerine fare olayları ekleme

Bu örnekler, fare eklemeyi ve olayları HTML işaretçisine sürüklemeyi gösterir.


Sonraki adımlar

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

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