Jak dodać etykiety tekstowe na mapie Ulotki bez ikony

22

Szukam sposobu na pokazanie tekstu na mapie Ulotki za pomocą markerów lub czegokolwiek innego bez pokazywania żadnej ikony. Chcę pokazać tylko tekst i móc go stylizować i obracać ... Wszelkie sugestie?

leaflet Etienne Desgagné
źródło
1
@NikhilVJ - Pytania i odpowiedzi nie omawiają sposobu wyświetlania podpowiedzi bez odpowiedniego znacznika. Odpowiedzi tutaj omawiają, jak mieć tylko tekst, bez widocznego znacznika.
ToolmakerSteve
ach przepraszam mój zły
Nikhil VJ

Odpowiedzi:

19

Rozwiązałem mój problem, używając funkcji Leaflet L.DivIcon, która reprezentuje lekką ikonę znaczników, która używa prostego elementu div zamiast obrazu ... Te znaczniki mają opcje html i className, które pozwalają mi tworzyć etykiety z napędem css style ...

Etienne Desgagné
źródło
11
Czy mógłbyś podać trochę kodu do tego?
mastov
Ta odpowiedź nie jest pomysłem, jeśli chcesz etykiety ORAZ markera
Roy
@Roy - to inna sytuacja; Zobacz L.Tooltip . Jeśli chcesz, aby etykieta (etykietka) zawsze się wyświetlała, ustaw opcję permanent na true.
ToolmakerSteve
16

Aktualizacja do Ulotki 1.0: Począwszy od Ulotki 1.0, wtyczka Leaflet.label jest depracowana, ponieważ została dołączona do rdzenia Ulotki jako L.Tooltip. Nie ma potrzeby dołączania skryptu źródłowego, a składnia uległa nieznacznej zmianie. Przykładowe użycie:

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

Styl CSS można zastosować do klasy w taki sam sposób jak poprzednio.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

Wydaje się również, że krycie markera może być całkowicie ustawione na 0.

Przed ulotką 1.0: Użyj wtyczki Leaflet.label (wspomnianej już przez geomajor56).

<script src="scripts/leaflet.label.js"></script>

Dzięki wtyczce Leaflet Label etykiety są bezpośrednio powiązane ze znacznikami, ale można ustawić krycie znacznika na prawie zero, aby widoczna była tylko etykieta. (Jeśli ustawisz krycie znacznika na 0, powiązana etykieta również zniknie.)

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

Następnie możesz użyć CSS do stylizowania etykiet według własnego uznania:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}
James Lawruk
źródło
<script src = "scripts / leaflet.label.js"> </script> - Po dodaniu tej linii do mojego HTML strona wyglądała na pustą. Czy muszę pobierać jakieś pliki?
Marcin Kosiński
@ MarcinKosiński - Tak, musisz pobrać plik leaflet.label.js z linku GitHub w poście i umieścić go w podfolderze witryny o nazwie skrypty. Lub możesz zastąpić adres URL w kodzie hostowanym plikiem w leaflet.github.io/Leaflet.label/leaflet.label.js (możesz również chcieć pliku CSS; ta sama nazwa i lokalizacja, inne rozszerzenie).
KeithS
próbowałem to zrobić ,,, jakiś pomysł, jak usunąć tło i ramkę? snag.gy/JdnpyV.jpg
WantIt
Podczas używania L.Tooltipwewnątrz onEachFeature pojawia się błąd: „Błąd typu Uncaught TypeError: Nie można wykonać polecenia„ appendChild ”w„ Węzle ”: parametr 1 nie jest typu„ Węzeł ”.”
Nikhil VJ
Rozwiązany, użyłem jednej z właściwości funkcji jako tekstu, musiałem dopisać .toString()na końcu. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Nikhil VJ
4

Możesz zacząć tutaj od tej wtyczki Ulotki . Prawdopodobnie stwórz lub edytuj znacznik według własnych upodobań. Czy tekst pochodzi z atrybutów funkcji?

geomajor56
źródło
To odpowiada na inne pytanie niż zadano. Oto jak dodać etykietę do istniejącego markera ; to nie wyjaśnienie, w jaki sposób mieć tylko etykietę - brak symbolu znacznika.
ToolmakerSteve
0 
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

To działa dla mnie

Sathish Kumar Arunachalam
źródło
To odpowiada na inne pytanie niż zadano. Oto jak dodać etykietę do istniejącego markera ; to nie wyjaśnienie, w jaki sposób mieć tylko etykietę - brak symbolu znacznika.
ToolmakerSteve