2013-08-29 15 views
11

Mam podstawowy program geoJson w javascript za pomocą ulotki API.Mapa javascript w ulotce jak odświeżyć

<html> 
<head> 

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
<script src="india.js" type="text/javascript"></script> 

</head> 


<body> 
<div id = "map1" style="width: 1100px; height: 400px"> </div> 

<script> 

var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 }); 

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area); 

var indiaLayer= L.geoJson(india, {style: {weight: 2, 
     opacity: 1, 
     color: 'white', 
     dashArray: '3', 
     fillOpacity: 0.1}}); 

     area.addLayer(indiaLayer); 

     function clicked(){ 

     this.options.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked);     
</script> 
</body> 
</html> 

Problem polega na tym, jak automatycznie odświeżać zawartość warstwy na mapie.

przykładem

   function clicked(){ 

     indiaLayer.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked); 

gdy użytkownik kliknie na indiaLayer zmienna zmian fillOpacity ale nie odzwierciedla powrót na mapie rozumianego ponieważ nie jestem odświeżanie mapy. Nie wiem, jak to zrobić.

pomóż

P/s: są to funkcje dostępne na obiekcie indiaLayer (czyli ten obiekt wewnątrz kliknął funkcji ... który z nich korzystać do tego celu lub istnieje żaden)

Można sprawdź listę dostępnych metod GEOJson w Leaflef documentation Jest to link do v.0.7.7, który jest najbliższy do wykorzystania w tym przykładzie.

Odpowiedz

17

Ostatni raz użyłem

map._onResize(); 

i że pomoże mi odświeżyć mapę. Może trochę hack, ale działa.

W kodzie będzie area._onResize()

PS: Może powinieneś spróbować zmienić sposób, aby ustawić nową wartość krycia - spróbuj zmienić

function clicked(){ 
    this.options.style.fillOpacity = 0.8; 
} 

tej

function clicked(){ 
    this.setStyle({fillOpacity: 0.2}); 
} 
+1

nie work..nothing dzieje map z tego kodu :( – user609306

+0

tylko zmodyfikowane moją odpowiedź mam nadzieję, że to pomaga – Elephant

+0

Hey @elephant ..yes this.setStyle ({fillOpacity: 0,2}) działa .... Spacibo – user609306

15
map.invalidateSize(); 

map._onResize() - to włamanie i nie ma gwarancji, że nie zostanie usunięty w przyszłych wersjach. .

+3

Faktycznie invalidateSize nie będzie działać, jeśli rozmiar mapy nie ulegnie zmianie.Z dokumentacji: "Sprawdza, czy rozmiar kontenera mapy zmienił się i aktualizuje mapę, jeśli tak" " – a1an

+0

Mój problem był w tej uwadze: Moja mapa była początkowo ukryta, a kiedy ją wyświetlono, nie została zainicjowana (nie wszystkie płytki były załadowany). Po dodaniu tej metody zadzwoń, aby rozwiązać ten problem. Myślę więc, że i tak sprawia to pewną aktualizację. –

0

area.fitBounds(area.getBounds());

+0

Op zapytał "Problem polega na tym, jak automatycznie odświeżyć zawartość warstwy na mapie." przykład tutaj – justDev7a3

+3

@ImportanceOfBeingErnest Przed przeczytaniem przeczytaj pytanie i odpowiedź. –