Bagaimana cara menambahkan label hanya teks pada peta Leaflet tanpa ikon


22

Saya mencari cara untuk menampilkan teks pada peta Leaflet menggunakan spidol atau apa pun tanpa menunjukkan ikon apa pun. Saya ingin menampilkan teks saja dan dapat mendesain dan memutarnya ... Ada saran?


1
@NikhilVJ - T&J itu tidak membahas bagaimana cara memiliki tooltip tanpa memiliki penanda yang sesuai. Jawabannya di sini membahas bagaimana hanya memiliki teks, tanpa penanda yang terlihat.
ToolmakerSteve

ah maaf
salahku

Jawaban:


19

Saya menyelesaikan masalah saya dengan menggunakan fitur Leaflet L.DivIcon yang mewakili ikon ringan untuk marker yang menggunakan elemen div sederhana alih-alih gambar ... Marker ini memiliki opsi html dan className yang memungkinkan saya membuat label dengan css yang digerakkan gaya ...


11
Maukah Anda memberikan sedikit kode untuk ini?
mastov

Jawaban ini bukan ide jika Anda menginginkan label DAN spidol
Roy

@ Roy - itu adalah situasi yang berbeda; Lihat L. Alat . Jika Anda ingin label (tooltip) selalu ditampilkan, Anda menetapkan opsi permanen ke true.
ToolmakerSteve

16

Pembaruan untuk Leaflet 1.0: Pada Leaflet 1.0, plugin Leaflet.label sudah tidak digunakan lagi, karena telah disertakan dengan inti Leaflet sebagai L.Tooltip. Tidak perlu menyertakan skrip sumber, dan sintaks telah sedikit berubah. Penggunaan sampel:

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);

Gaya CSS dapat diterapkan ke kelas dengan cara yang sama seperti sebelumnya.

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

Tampaknya juga opacity marker dapat diatur sepenuhnya ke 0.


Sebelum Leaflet 1.0: Gunakan Plugin Leaflet.label (sudah disebutkan oleh geomajor56).

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

Dengan plugin Leaflet Label, label terkait langsung dengan marker, tetapi Anda dapat mengatur opacity marker menjadi hampir nol sehingga hanya label yang terlihat. (Jika Anda mengatur opacity marker ke 0, label terkait juga menghilang.)

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);

Anda kemudian dapat menggunakan CSS untuk menata label Anda sesuai keinginan Anda:

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

<script src = "scripts / leaflet.label.js"> </script> - Setelah saya menambahkan baris ini ke HTML saya, halaman tampak kosong. Apakah saya perlu mengunduh file?
Marcin Kosiński

@ MarcinKosiński - Ya, Anda harus mengunduh leaflet.label.js dari tautan GitHub di pos, dan memasukkannya ke dalam subfolder dari skrip situs web Anda yang diberi nama skrip. Atau, Anda dapat mengganti URL dalam kode dengan file yang dihosting di leaflet.github.io/Leaflet.label/leaflet.label.js (Anda mungkin juga menginginkan file CSS; nama dan lokasi yang sama, ekstensi dan nama yang sama, ekstensi yang berbeda).
KeithS

saya mencoba melakukan ini ,,, tahu cara menghapus latar belakang dan perbatasan? snag.gy/JdnpyV.jpg
WantIt

Saat menggunakan L.Tooltipdi dalam onEachFeature, mendapatkan kesalahan: "UnEught TypeError: Gagal menjalankan 'appendChild' pada 'Node': parameter 1 bukan dari tipe 'Node'."
Nikhil VJ

Diselesaikan, saya menggunakan salah satu properti fitur sebagai teks, harus menambahkan .toString()di bagian akhir. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Nikhil VJ

4

Anda bisa mulai di sini dengan plugin Leaflet ini . Mungkin membuat atau mengedit penanda sesuai keinginan Anda. Apakah teks berasal dari atribut fitur?


Ini menjawab pertanyaan yang berbeda dari yang diminta. Ini adalah cara menambahkan label ke marker yang ada ; ini bukan penjelasan tentang bagaimana hanya memiliki label - tanpa simbol penanda.
ToolmakerSteve

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

Ini bekerja untuk saya


Ini menjawab pertanyaan yang berbeda dari yang diminta. Ini adalah cara menambahkan label ke marker yang ada ; ini bukan penjelasan tentang bagaimana hanya memiliki label - tanpa simbol penanda.
ToolmakerSteve
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.