2016-09-07 23 views
5

Chcę dodać tekst do mapy, który nie zostanie przeskalowany po zmianie powiększenia i pozostanie przy oryginalnych rozmiarach.Czy mogę mieć stały tekst w ulotce?

Używam tego kodu (JavaScript):

var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001}); 
text.bindLabel("TEXT", styleProperties); 
text.addTo(myLayer); 

i uzyskać ten niepożądany rezultat: enter image description here

chcę, że tekst pozostanie z wielkością pierwszego obrazu w lewo, gdy są stosowane zoom . Czy to możliwe?

edytuj: tekst musi być jak nazwa miasta, które porusza się z mapą, ale nie zmienia jej rozmiaru podczas powiększania (tak, wiem, że nazwa miasta to obrazy, ponieważ nie jest to łatwe rozwiązanie mojego problemu). Dzięki za odpowiedzi, na razie utrzymuję laboratoria, nie jest to eleganckie rozwiązanie, ale działa.

Odpowiedz

0

Użyj znacznika z numerem L.DivIcon.

+0

dzięki, ale mają taki sam efekt etykiety, gdy zoom. Znalazłem ten przykład: http://jsfiddle.net/erictheise/UaDDv/ –

0

Można użyć wtyczki Leaflet.label (począwszy od Ulotki 1.0, L.Label jest dodawany do rdzenia Ulotki jako L.Tooltip). Możesz go stylizować za pomocą własnego css. Zobacz example.

+0

Używam tej wtyczki (w drugim rzędzie widać funkcję bindLabel), problem polega na tym, że tekst etykiety jest skalowany, gdy powiększam . Chcę, aby po dodaniu do mapy tekst pozostał w tym samym ustalonym rozmiarze (patrz pierwsze zdjęcie po lewej). "Spalony na mapie". –

0

Wygląda na to, że Twój tekst nie jest tak naprawdę związany z twoją mapą. Co powiesz na dodanie tekstu w innym dziale do kontenera mapy?

<div> 
    <div id="map" style="width: 600px; height: 400px"></div> 
    <div style="pointer-events: none; position: absolute; top: 100px; left: 100px">foo bar</div> 
    </div> 

zobacz pełne Przykład here

+0

Dzięki, ale nie jest to, czego chcę. Tekst musi poruszać się z mapą, jak nazwa miasta. –

0

O ile dobrze rozumiem, chcesz dynamiczny rozmiar czcionki w zależności od poziomu powiększenia. Właśnie o tym, o czym wspomniałeś.

Możesz zmienić rozmiar czcionki zgodnie z poziomem powiększenia. Do wtyczki Leaflet.Label można dodać moduł obsługi zdarzeń do powiększania i odtwarzać za pomocą rozmiaru czcionki etykiety i innych stylów etykiety.

Mam inny przykład bez Leaflet.Label, który dodaje element tekstowy obok obiektu ścieżki. Tak więc tekst jest osadzony w svg i zmieniam rozmiar czcionki zgodnie z poziomem powiększenia. Chociaż nie mogłem znaleźć lepszej funkcji.

https://embed.plnkr.co/hU6ip8T58tvE7CHJwniR/

Powiązane problemy