Как добавить текстовые метки на карту Leaflet без иконки

22

Я ищу способ показать текст на карте Leaflet с помощью маркеров или чего-либо еще, не показывая значок. Я хочу показывать только текст и иметь возможность стилизовать и поворачивать его ... Есть предложения?

leaflet

— Этьен Десганье
источник

1

@NikhilVJ - Вопросы и ответы не обсуждают, как получить всплывающую подсказку без соответствующего маркера. Ответы здесь обсуждают, как иметь только текст, без видимого маркера.

— ToolmakerSteve

ах, прости мой плохой

— Nikhil VJ

19

Я решил свою проблему с помощью функции Leaflet L.DivIcon, которая представляет собой облегченный значок для маркеров, в котором вместо изображения используется простой элемент div ... Эти маркеры имеют параметры html и className, которые позволяют мне создавать ярлыки с использованием CSS. стили ...

— Этьен Десганье
источник

11

Не могли бы вы предоставить немного кода для этого?

— мастов

Этот ответ не является идеей, если вы хотите ярлык И маркер

— Рой

@Roy - это другая ситуация; Смотри L.Tooltip . Если вы хотите, чтобы метка (всплывающая подсказка) отображалась всегда, установите для параметра перманент значение true.

— 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.

До Leaflet 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;
}

— Джеймс Лаврук
источник

— Марчин Косински,

@ MarcinKosiński - Да, вам нужно скачать leaflet.label.js по ссылке GitHub в посте и поместить ее в подпапку вашего сайта с именем scripts. Или вы можете заменить URL-адрес в коде размещенным файлом по адресу leaflet.github.io/Leaflet.label/leaflet.label.js (вам также может понадобиться файл CSS; то же имя и местоположение, другое расширение).

— KeithS

я пытался сделать это ,, любую идею, как удалить фон и границу? snag.gy/JdnpyV.jpg

— Хочу

При использовании L.Tooltipвнутри onEachFeature выдается ошибка: «Uncaught TypeError: не удалось выполнить appendChild» на «Node»: параметр 1 не относится к типу «Node». »

— Nikhil VJ

Решено, я использовал одно из свойств объекта в качестве текста, пришлось добавить .toString()в конце. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

Вы можете начать здесь с этим плагином Leaflet . Возможно, создайте или отредактируйте маркер по своему вкусу. Текст исходит из атрибутов объекта?

— geomajor56
источник

Это отвечает на другой вопрос, чем был задан. Это как добавить метку к существующему маркеру ; это не объяснение того, как иметь только метку - без символа маркера.

— ToolmakerSteve

0

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

Это работает для меня

— Сатиш Кумар Аруначалам
источник

Это отвечает на другой вопрос, чем был задан. Это как добавить метку к существующему маркеру ; это не объяснение того, как иметь только метку - без символа маркера.

— ToolmakerSteve