Как добавить текстовые метки на карту 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;
}
Джеймс Лаврук
источник
<script src = "scripts / leaflet.label.js"> </ script> - после того, как я добавил эту строку в свой HTML, страница оказалась пустой. Нужно ли скачивать какие-либо файлы?
Марчин Косински,
@ 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