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: