Doczytywanie opisów markerów

Proste aplikacje często łączą warstwę danych z warstwą skryptową. Przykładowo, bezpośrednio w skrypcie możesz przechowywać tekst, który otwierany jest w oknach infoWindow. Ta metoda ma jednak kilka wad, które mogą stać się uciążliwe, jeśli na mapę trzeba wstawić predefiniowane markery, a nie korzystamy z dobrodziejstw XML:
- im więcej tekstu w skrypcie, tym większy jego rozmiar - a co za tym idzie - dłuższy czas wczytywania
- użytkownik zazwyczaj nie będzie otwierał okien wszystkich dostępnych markerów, co oznacza, że nie istnieje potrzeba przechowywania ich zawartości
W tej części kursu napiszemy aplikację, która po kliknięciu na marker wczytuje z zewnętrznego pliku odpowiednie dane na żądanie - oszczędza to czas przy ładowaniu oraz transfer.
Zasada działania
Każdemu dodawanemu markerowi przypiszemy pewną właściwość url, w której będzie przechowywany adres pliku, zawierającego tekst okna infoWindow. Następnie, za pomocą prototypowanej metody openAjaxInfoWindow() plik ten będzie pobierany, a jego zawartość wyświetlana w okienku:
GMarker.prototype.openAjaxInfoWindow = function(url,opcje) { var marker = this; GLog.write('Pobieram plik '+url); // w celach diagnostycznych następuje wyświetlenie komunikatu o pobieranym pliku GDownloadUrl(url,function(tresc,kodOdpowiedzi) { kontener.innerHTML = '<div style="width: 300px; height: 200px; overflow: auto;">'+tresc+'</div>'; marker.openInfoWindow(kontener,opcje); }); }
Obiekt kontener tworzymy na początku działania skryptu jako obiekt globalny:
var kontener = document.createElement('div');
Funkcja, służąca do dodania markera na mapę może wyglądać następująco:
function dodajMarker(punkt,url,opcje) { var marker = new GMarker(punkt); marker.url = url; mapa.addOverlay(marker); GEvent.addListener(marker,'click',function() { marker.openAjaxInfoWindow(marker.url); }); return marker; }
Przykład działania (bez XML)
Dodamy marker, przekazując funkcji dodajMarker() następujące parametry:
var marker = dodajMarker(new GLatLng(53.41,14.58),'/examples/012/01/titanic.html',{}); mapa.addOverlay(marker);
Sprawdzamy działanie w praktyce - działa prawidłowo, a dodatkowo czas między kliknięciem a wyświetleniem treści jest praktycznie niezauważalny: przykład 1pokaż kod przykładu
Przykład działania (XML)
Zapisanie danych w pliku XML jest zazwyczaj lepszym rozwiązaniem niż trzymanie ich w skrypcie. Jeśli jednak łączna objętość wszystkich tekstów, które muszą być zawarte w pliku XML jest duża, można również zaimplementować rozwiązanie jak w powyższym przykładzie, a w pliku XML pozostawić jedynie odnośnik do pliku z opisem. Przykładowy plik XML:
<dane> <marker lat="53.41" lon="14.58" url="/examples/012/01/titanic.html" /> </dane>
Wczytamy ten plik za pomocą prostej funkcji, parsującej XML:
function wczytajMarkery(url) { GLog.write('Wczytuję '+url); // w celach diagnostycznych GDownloadUrl(url,function(dane,kodOdpowiedzi) { var xml = GXml.parse(dane); var markery = xml.documentElement.getElementsByTagName('marker'); for(var i=0; i<markery.length; i++) { var lat = parseFloat(markery[i].getAttribute("lat")); var lon = parseFloat(markery[i].getAttribute("lon")); var url = markery[i].getAttribute("url"); dodajMarker(new GLatLng(lat,lon),url,{}); } }); }
Funkcję wczytajMarkery() wywołamy tuż za inicjalizacją mapy:
wczytajMarkery('/examples/006/02/markery.xml');
I gotowe! Oczywiście, efekt działania będzie identyczny jak w przykładzie 1, ale efektywność rozwiązania znacząco wzrasta, szczególnie jeśli na Twojej mapie jest wiele markerów o długich, rozbudowanych opisach: przykład 2pokaż kod przykładu
Uwagi
- Jak zwykle, pamiętaj o ograniczeniach, wynikających z zabezpieczeń przed atakami typu XSS. Pobierany plik z opisem musi być w tej samej domenie co skrypt go wywołujący.
- Jeżeli możesz, używaj metody opisanej w tym przykładzie: Optymalizacja wyświetlania dużej ilości znaczników. Dzięki niej, marker może posiadać dwa rodzaje opisów - skrócony i rozszerzony, przy czym ten drugi jest pobierany dynamicznie na żądanie użytkownika.