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

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

— 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