Як додати текстові мітки на карті Leaflet без значка


22

Я шукаю спосіб відобразити текст на карті Leaflet за допомогою маркерів або чогось іншого, не показуючи жодної піктограми. Я хочу показати лише текст і мати змогу стилювати і обертати його ... Будь-яка пропозиція?


1
@NikhilVJ - Ця запитання не обговорює, як мати підказку, не маючи відповідного маркера. Відповіді тут обговорюють, як мати лише текст, без видимого маркера.
ToolmakerSteve

ах вибачте мої погані
Nikhil VJ

Відповіді:


19

Я вирішив свою проблему за допомогою функції Leaflet L.DivIcon, яка являє собою легкий значок для маркерів, який використовує простий елемент div замість зображення ... Ці маркери мають параметри html та className, які дозволяють мені створювати мітки з керованим css стилі ...


11
Ви б не хотіли запропонувати для цього трохи коду?
mastov

Ця відповідь не є ідеєю, якщо ви хочете етикетки І маркера
Рой

@Roy - це інша ситуація; Див. L.Tooltip . Якщо ви хочете, щоб мітка (підказка) завжди відображалася, ви встановлюєте опцію "Постійний" на "Істинне".
ToolmakerSteve

16

Оновлення для 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.


Перед листовкою 1.0: Використовуйте плагін Leaflet.label (вже згадувався geomajor56).

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

<script src = "script / leaflet.label.js"> </script> - Після додавання цього рядка до мого HTML сторінка видалася порожньою. Чи потрібно завантажити будь-які файли?
Марцін Косінський

@ MarcinKosiński - Так, вам потрібно буде завантажити leaflet.label.js із посилання GitHub у пості та помістити його у підпапку вашого веб-сайту з назвою сценаріїв. Або можна замінити URL-адресу в коді розміщеним файлом за адресою leaflet.github.io/Leaflet.label/leaflet.label.js (ви також можете захотіти файл CSS; те саме ім’я та місцезнаходження, інше розширення).
KeithS

Я намагався це зробити ,,, будь-яка ідея, як видалити фон і кордон? snag.gy/JdnpyV.jpg
WantIt

Під час використання L.Tooltipвсередині onEachFeature отримує помилку: "Uncaught TypeError: Не вдалося виконати" appendChild "на" Node ": параметр 1 не типу" Node "."
Nikhil VJ

Вирішивши, я використовував одну з властивостей функції як текст, повинен був додати a .toString()в кінці. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Nikhil VJ

4

Ви можете почати тут із цього плагіну Leaflet . Можливо, створіть або відредагуйте маркер на свій смак. Текст походить з атрибутів функції?


Це відповідає на інше питання, ніж було задано. Ось як додати мітку до існуючого маркера ; це не пояснення того, як мати лише мітку - ніякого символу маркера.
ToolmakerSteve

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

Це працює для мене


Це відповідає на інше питання, ніж було задано. Ось як додати мітку до існуючого маркера ; це не пояснення того, як мати лише мітку - ніякого символу маркера.
ToolmakerSteve
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.