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?
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?
Jawaban:
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 ...
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.
<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;
}
L.Tooltip
di dalam onEachFeature, mendapatkan kesalahan: "UnEught TypeError: Gagal menjalankan 'appendChild' pada 'Node': parameter 1 bukan dari tipe 'Node'."
.toString()
di bagian akhir. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Anda bisa mulai di sini dengan plugin Leaflet ini . Mungkin membuat atau mengedit penanda sesuai keinginan Anda. Apakah teks berasal dari atribut fitur?
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });
Ini bekerja untuk saya