Я шукаю спосіб відобразити текст на карті Leaflet за допомогою маркерів або чогось іншого, не показуючи жодної піктограми. Я хочу показати лише текст і мати змогу стилювати і обертати його ... Будь-яка пропозиція?
Я шукаю спосіб відобразити текст на карті Leaflet за допомогою маркерів або чогось іншого, не показуючи жодної піктограми. Я хочу показати лише текст і мати змогу стилювати і обертати його ... Будь-яка пропозиція?
Відповіді:
Я вирішив свою проблему за допомогою функції Leaflet L.DivIcon, яка являє собою легкий значок для маркерів, який використовує простий елемент div замість зображення ... Ці маркери мають параметри html та className, які дозволяють мені створювати мітки з керованим css стилі ...
Оновлення для Leaflet 1.0: Станом на Leaflet 1.0 плагін Leaflet.label вимикається, оскільки він був включений до ядра Leaflet як L.Tooltip
. Не потрібно включати вихідний скрипт, і синтаксис трохи змінився. Використання зразка:
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-стиль може застосовуватися до класу так само, як і раніше.
.my-label {
position: absolute;
width:1000px;
font-size:20px;
}
Також виявляється, що непрозорість маркера може бути встановлена повністю 0.
<script src="scripts/leaflet.label.js"></script>
За допомогою плагіна Leaflet Label мітки безпосередньо прив’язуються до маркерів, але ви можете встановити непрозорість маркера майже до нуля, так що видно лише мітку. (Якщо встановити непрозорість маркера на 0, пов’язана мітка також зникає.)
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);
Потім ви можете використовувати CSS для стилізації міток так, як вам здається:
.my-label {
position: absolute;
width:1000px;
font-size:20px;
}
L.Tooltip
всередині onEachFeature отримує помилку: "Uncaught TypeError: Не вдалося виконати" appendChild "на" Node ": параметр 1 не типу" Node "."
.toString()
в кінці. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Ви можете почати тут із цього плагіну Leaflet . Можливо, створіть або відредагуйте маркер на свій смак. Текст походить з атрибутів функції?
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });
Це працює для мене