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?

leaflet Etienne Desgagné
sumber
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 ...

Etienne Desgagné
sumber
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;
}
James Lawruk
sumber
<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?

geomajor56
sumber
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

Sathish Kumar Arunachalam
sumber
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