Haritaya HTML işaretçileri ekleme

Bu makalede, haritaya HTML İşaretçisi olarak görüntü dosyası gibi özel bir HTML ekleme gösterilir.

Not

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

Önemli

Azure Haritalar Web denetiminde işleme için WebGL kullanan çoğu katmandan farklı olarak, HTML İşaretçileri işleme için geleneksel DOM öğelerini kullanır. Bu nedenle, bir sayfaya ne kadar çok HTML işaretçisi eklenirsa doM öğeleri o kadar fazla olur. Birkaç yüz HTML işaretçisi ekledikten 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 bulundurabilirsiniz.

HTML işaretçisi ekleme

HtmlMarker sınıfının varsayılan stili vardır. İşaretçinin renk ve metin seçeneklerini ayarerek işaretçiyi özelleştirebilirsiniz. HTML işaretçi sınıfının varsayılan stili, ve yer tutucusu olan bir SVG {color}{text} ş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 color özelliğini "Blue" ve text özelliğini "10" olarak ayarlar. İşaretçiye bir açılan pencere ekli click ve açılan pencere görünürlüğünü iki durumlu olarak değiştiren 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şlevlerin çalışan tam kod örneği aşağıda verilmiştir.


SVG şablon html işaretçisi oluşturma

Html htmlContent işaretçisi varsayılan olarak, içinde ve klasörlerini içeren bir SVG {color}{text} şablonudur. Özel SVG dizeleri oluşturabilir ve aynı yer tutucuları SVG'nize ekleyebilir, böylece işaretçinin ve seçeneklerini ayarlayan bu yer tutucuları colortext SVG'nize güncelleştirebilirsiniz.


İpucu

Azure Haritalar web SDK'sı, HTML işaretçileriyle kullanılan ç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şaretçilerinin avantajlarından biri, CSS kullanılarak elde edilebilir birçok harika özelleştirme olmasıdır. Bu örnekte HtmlMarker'ın içeriği, yerine ve kalp atışlarına neden olan animasyonlu bir pini oluşturan HTML ve CSS'den oluşur.


Sürüklenebilir HTML işaretçileri

Bu örnek, bir HTML işaretçisini sürüklenebilir hale nasıl hale sürüklendiğini gösterir. HTML işaretçileri drag , dragstart ve olaylarını dragend destekler.


HTML işaretçilere fare olayları ekleme

Bu örnekler, bir HTML işaretçisi için fare ve sürükleme olaylarını eklemeyi gösterir.


Sonraki adımlar

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

Haritalarınızı eklemek üzere daha fazla kod örneği için aşağıdaki makalelere bakın: