2016-09-29 32 views
6

Mam mapę leaflet i chciałbym dodać tytuł html (tooltip) do mojego wielokąta. Jeśli używam zwykłego JQuery:Jak dodać tytuł html (etykieta narzędzia) do wielokąta leaflet.js?

$('<title>my tooltip</title>').appendTo() 

Tytuł zostanie dodany do DOM, ale nie będzie widoczny. Aby uzyskać więcej informacji, zobacz here, ale jeśli zastosuję się do tego rozwiązania, nie będę już mógł korzystać z funkcji ulotek.

Próbowałem też wtyczki leaflet.label, ale etykieta porusza się za pomocą wskaźnika myszy. Chcę po prostu standardowy tytuł podpowiedź przeglądarki, która pojawia się wkrótce po jednej pozycji przy aktywowaniu)

dzięki za pomoc

+1

zapewniają trochę skrzypiec. –

Odpowiedz

8

Ulotka 1.0.0 zawiera nową wbudowaną L.tooltip klasy, która przestarzałym wtyczki Leaflet.label. Etykietka wskazuje punkt środkowy kształtu i nie porusza się za pomocą myszy.

L.polygon(coords).bindTooltip("my tooltip").addTo(map); 

Demo: https://jsfiddle.net/3v7hd2vx/91/


Aby rozwiązać komentarz OP o podpowiedzi wyświetlanej w centrum wielokąta, które mogą być poza zasięgiem wzroku, gdy wielokąt jest bardzo duży i aktualny zoom jest wysoka, można należy wybrać opcję sticky:

L.polygon(coords).bindTooltip("my tooltip", { 
    sticky: true // If true, the tooltip will follow the mouse instead of being fixed at the feature center. 
}).addTo(map); 

Aktualizacja demo: https://jsfiddle.net/3v7hd2vx/402/

+0

o dzięki, wygląda dobrze, ale mój wielokąt (dobrze, prostokąt) jest pełnym rozmiarem mapy. Wygląda na to, że podpowiedź gubi się gdzieś. –

+0

Dodano opcję "przyklejania", aby rozwiązać powyższy problem. – ghybs