Broşür eşlemesinde simge içermeyen salt metin etiketleri nasıl eklenir

22

Leaflet haritasında metin işaretleyicileri veya herhangi bir simge göstermeden başka bir şey kullanarak göstermenin bir yolunu arıyorum. Yalnızca metni göstermek ve onu stillendirmek ve döndürmek istiyorum ... Herhangi bir öneriniz var mı?

leaflet

— Etienne Desgagné
kaynak

1

@NikhilVJ - Soru ve Cevap, karşılık gelen bir işaretleyiciye sahip olmadan nasıl bir araç ipucunun olacağını tartışmaz . Cevaplar burada sahip olmak nasıl tartışmak sadece görünür hiçbir işaretleyici ile metin.

— ToolmakerSteve

ah üzgünüm benim kötü

— Nikhil VJ

19

Sorunumu, görüntü yerine basit bir div öğesi kullanan işaretçiler için hafif bir simgeyi temsil eden Leaflet L.DivIcon özelliğini kullanarak çözdüm ... Bu işaretleyicilerin, hss ve css ile etiketler oluşturmama izin veren bir sınıfAdı seçeneği var. stilleri ...

— Etienne Desgagné
kaynak

11

Bunun için biraz kod vermeyi düşünür müsün?

— mastov

Bir etiket VE bir işaretleyici istiyorsanız bu cevap bir fikir değil

— Roy

@Roy - bu farklı bir durum; L.Tooltip’e bakınız . Etiketin (araç ipucunun) her zaman gösterilmesini istiyorsanız, seçeneği kalıcı olarak true olarak ayarlayın.

— ToolmakerSteve

16

Leaflet 1.0 Güncellemesi: Leaflet 1.0'dan itibaren, Leaflet.label eklentisi , Leaflet çekirdeğine olduğu gibi dahil edildiği için kullanıma sunuldu L.Tooltip. Kaynak betiği eklemenize gerek yoktur ve sözdizimi biraz değişmiştir. Örnek kullanım:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

CSS stilleri, sınıfa önceden olduğu gibi uygulanabilir.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

Ayrıca, işaretçi opaklığının tamamen 0 olarak ayarlandığı görünmektedir.

Leaflet 1.0'dan Önce: Leaflet.label Eklentisini kullanın (önceden geomajor56 tarafından belirtilmiştir).

<script src="scripts/leaflet.label.js"></script>

Leaflet Label eklentisi ile etiketler doğrudan işaretleyicilere bağlanır, ancak işaretleyicinin opaklığını neredeyse sıfıra ayarlayabilirsiniz, böylece yalnızca etiket görünür. (İşaretleyicinin opaklığını 0 olarak ayarlarsanız, ilişkili etiket de kaybolur.)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Daha sonra etiketlerinizi uygun gördüğünüz şekilde biçimlendirmek için CSS'yi kullanabilirsiniz:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

— James Lawruk
kaynak

— Marcin Kosiński

@ MarcinKosiński - Evet, yayındaki GitHub bağlantısından leaflet.label.js dosyasını indirmeniz ve web sitenizin script adlı bir alt klasörüne koymanız gerekir. Veya, koddaki URL'yi leaflet.github.io/Leaflet.label/leaflet.label.js adresindeki barındırılan dosyayla değiştirebilirsiniz (aynı zamanda CSS dosyasını; aynı adı ve konumu, farklı uzantıları da isteyebilirsiniz).

— KeithS

Bunu yapmaya çalıştım, arka planı ve sınırı nasıl kaldırabilirim? snag.gy/JdnpyV.jpg

— WantIt

L.TooltipOnEachFeature içinde kullanılırken hata alıyorum: "Uncaught TypeError: 'Node' üzerinde 'appendChild' yürütülemedi: parametre 1 'Node' türünde değil."

— Nikhil VJ

Çözüldü, özellik özelliklerinden birini metin olarak kullanıyordum .toString(), sonunda bir tane eklemek zorunda kaldım . marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

Buradan bu Broşür eklentisi ile başlayabilirsiniz . Muhtemelen beğeninize bir işaretleyici oluşturun veya düzenleyin. Metin özellik özelliklerinden mi geliyor?

— geomajor56
kaynak

Bu, sorulandan farklı bir soruyu yanıtlar. Bu, mevcut bir işaretçiye nasıl etiket ekleneceğidir ; öyle değil sahip olarak nasıl bir açıklama sadece hayır işaretleyici sembol - Etiket.

— ToolmakerSteve

0

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

Bu benim için çalışıyor

— Sathish Kumar Arunachalam
kaynak

Bu, sorulandan farklı bir soruyu yanıtlar. Bu, mevcut bir işaretçiye nasıl etiket ekleneceğidir ; öyle değil sahip olarak nasıl bir açıklama sadece hayır işaretleyici sembol - Etiket.

— ToolmakerSteve