Optymalizacja wyświetlania dużej ilości znaczników
Do mapy można dodać teoretycznie nieskończoną ilość markerów. W praktyce okazuje się, że dodanie kilkuset markerów nawet na bardzo dobrych komputerach może znacznie spowalniać działanie mapy (szarpane przesuwanie, długi okres oczekiwania na wykonanie operacji itp.)
Każdy marker, dodany na mapę funkcją mapa.addOverlay() istnieje na niej aż do usunięcia. Oglądając więc pewien obszar, dla celów rysowania w pamięci przeglądarki są wszystkie markery z danej mapy nawet, jeśli znajdują się poza krawędzią widocznego pola na mapie.
Z pomocą przychodzi Marker Manager (menedżer markerów) - wbudowana klasa w Google Maps API. Raz utworzony, śledzi położenie wszystkich markerów na mapie, i trzyma w pamięci jedynie te, które w danym momencie faktycznie widzisz.
Sposób użycia
Inicjalizacja
Wpierw musisz utworzyć nowy obiekt klasy GMarkerManager:
var mmgr;
var mapa;
mapa = new GMap2(document.getElementById('mapka'));
mmgr = new GMarkerManager(mapa,{maxZoom: 19});
mmgr musi być obiektem globalnym. Pierwszym argumentem jest odwołanie do mapy, na której markery będą śledzone. Opcjonalny parametr opcji maxZoom określa maksymalny poziom zoom, przy którym markery są śledzone. W przeważającej części przypadków, argument ten należy ustawić na 19 - maksymalny poziom zoomu w Google Maps API
Dodanie markera do śledzenia
Dodanie pojedynczego markera do śledzenia odbywa się następująco:
var marker = new GMarker(punkt); mmgr.addMarker(marker,3,19);
Funkcja addMarker() przyjmuje trzy argumenty, z czego dwa ostatnie są opcjonalne. Pierwszy to marker, który dodamy na mapę. Drugi i trzeci określają minimalny i maksymalny poziom zoomu, na których marker będzie widoczny. Na końcu tej części kursu pokażę zastosowanie tej ciekawej funkcjonalności.
Efekt działania
Przykład 1 umożliwia dodanie określonej ilości markerów na mapę bez użycia GMarkerManager. Na moim komputerze (PIV, 3.2Ghz) dodanie 200 markerów powoduje już widoczne lagi w przesuwaniu mapy, po dodaniu kolejnych 400 lagi stają się już bardzo zauważalne. przykład 1pokaż kod przykładu
Przykład 2 realizuje to samo, ale z użyciem GMarkerManager. Dla uwypuklenia różnic, dodawane ilości pomnożono przez 10. Na moim komputerze, dodanie nawet 10 000 markerów nie stanowi problemu. przykład 2pokaż kod przykładu
Uwaga: ten przykład wykorzystuje funkcję addMarkers() do dodania markerów z tablicy. Czytaj dalej, by dowiedzieć się o jej działaniu
Wykorzystanie minimalnego i maksymalnego zoomu dla markera
Opcjonalne parametry, odpowiedzialne za minimalny i maksymalny zoom, przy którym marker jest widoczny pozwalają osiągać ciekawe efekty. Wraz ze wzrostem zoomu możesz zapewnić wzrost szczegółowości mapy, np. przy najbardziej odległym zoomie pokazujesz jedynie państwa, które odwiedziłeś, na nieco bliższym miasta, w których przebywałeś, wreszcie na szczegółowym przybliżeniu możesz zacząć pokazywać hotele, w których się zatrzymałeś.
Aby ustalić, na jakim poziomie ma wyświetlać się dany marker, skorzystaj z drugiego i/lub trzeciego argumentu funkcji addMarker(). Jeśli podasz tylko drugi argument, to marker będzie się wyświetlał w najbardziej szczegółowym przybliżeniu aż do poziomu, który podałeś. Jeśli podasz dwa argumenty, to marker będzie się wyświetlał w przedziale od zoomu określonego drugim do zoomu, określonego trzecim argumentem.
Demonstracja działania dostępna jest jako przykład poniżej. W domyślnym widoku widzisz 5 z wielu dzielnic Szczecina. Oddal trochęmapę, a dzielnice znikną, zamiast nich będzie jedynie marker miasta Szczecina. Oddal przybliżenie jeszcze dalej, a zobaczysz flagę Polski, a marker Szczecina zniknie. przykład 3pokaż kod przykładu
Dodanie wielu markerów naraz
Aby jeszcze bardziej usprawnić działanie aplikacji, możesz też zamiast dodawać kolejno markery do menedżera markerów, dodać je wszystkie naraz. Funkcja, która dodaje naraz wszystkie markery nazywa się addMarkers(markery,zoomMin,zoomMax), i przyjmuje następujące argumenty:
- markery - tablica z markerami, które chcesz dodać
- zoomMin i zoomMax - działają identycznie jak w przypadku dodawania pojedynczego markera
Przykład
var marker1 = new GMarker(new GLatLng(53.4564,14.5433));
var marker2 = new GMarker(new GLatLng(52.1224,14.3742));
var marker3 = new GMarker(new GLatLng(52.3554,14.4732));
var markery = [marker1,marker2,marker3];
mmgr = new GMarkerManager(mapa,{maxZoom:20});
mmgr.addMarkers(markery,7,13);
mmgr.refresh();
Zwróć uwagę, że ta funkcja wymaga wywołania odświeżenia mmgr.refresh(), aby markery zostały wstawione na mapę.
Pełny kod powyższego listingu dostępny jest w przykładzie 4 przykład 4pokaż kod przykładu
Przykład 2
Jeśli zamierzasz dodać dużo markerów, to rozwiązanie z przykładu 4 jest mało efektywne. W przykładzie 5 napisano funkcję, która generuje tablicę 1000 markerów: przykład 5pokaż kod przykładu
Uwagi
Przy ustawieniu drugiego parametru maxZoom pamiętaj, że nie może być on większy niż ten, który podano przy inicjalizacji menedżera markerów!
Przejdź do kolejnej części kursu
Tytuł następnej części kursu to Debugowanie skryptów dla początkujących
- 1.Pierwsza mapa
- 2.Dodawanie znaczników na mapę
- 3.Zmiana domyślnej ikony znacznika
- 4.Popularne, darmowe ikony dla markerów
- 5.Wyświetlanie informacji na mapie
- 6.Wbudowane kontrolki i sterowanie
- 7.Zdarzenia
- 8.Polilinie
- 9.Obliczenia
- 10.Wczytywanie danych z pliku XML
- 11.Geokodowanie adresów
- jesteś tu!Optymalizacja wyświetlania dużej ilości znaczników
- 13.Debugowanie skryptów dla początkujących