www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Optymalizacja wyświetlania dużej ilości znaczników

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradnikó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

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Pierwsza mapa

API v2

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Dodawanie znaczników na mapę

API v2

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Popularne, darmowe ikony dla markerów

API v2

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej


Geokodowanie adresów

API v2

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)