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.

Wczytywanie danych z pliku XML

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

Jeśli zawartość Twojej mapy (markery, opisy) mają być generowane dynamicznie (np. z bazy MySql), lub też zwyczajnie lubisz mieć porządek w kodzie, warta uwagi będzie możliwość asynchronicznego pobierania specjalnie przygotowanego pliku, a następnie wyświetlenie zawartości mapy w opaciu o jego treść. Jakie są korzyści z zastosowania tej technologi?

  • Oddzielenie warstwy skryptowej od danych
  • Dodawanie setek czy tysięcy markerów nie powiększa pliku skryptowego
  • Jest to rozwiązanie eleganckie, nie spowalniające mapy przy jej wczytaniu
  • Wczytywanie danych z pliku XML pozwala zrobić pasek postępu

Podstawy

Naszym zadaniem będzie pobranie pliku (np. dane1.xml), przeparsowanie go funkcją GXml, a następnie wykonanie funkcji wyświetlającej markery z danych, pobranych z pliku.

W API2, dostępna była wbudowana funkcja GDownloadUrl, pozwalająca na pobieranie XML. API w wersji 3 nie posiada jej odpowiednika, trzeba zatem napisać własną funkcję lub skorzystać z gotowych bibliotek. W tym poradniku, zastosowano niewielką bibliotekę jxs. Należy dołączyć skrypt, na przykład w sposób następujący (w tym przykładzie linkujemy do lokalnej kopii skryptu):

<script src="/examples/109/jxs.js" type="text/javascript"></script>   

Na oficjalnej stronie można znaleźć szerszą dokumentację działania, w przykładach na tej stronie stosuje się następującą konstrukcję:

jx.load('ADRES_PLIKU_XML', function(xml)
{
	/* parsowanie pliku XML */
},'xml','get');

Pozwala ona pobrać plik XML za pomocą metody GET. Po pobraniu pliku wywoływana jest nienazwana funkcja, określona drugim argumentem. Trzeci argument jest informacją, w jaki sposób przetwarzać pobrane dane.

Przygotowałem plik XML, zawierający dane o 11 markerach - wybranych państwach Europy:

<dane>
	<marker lat="62.098297000000000" lon="17.3847860000" ikona="https://gmapsapi.com/ikony/szwecja.png" nazwa="Szwecja"/>
	<marker lat="61.438767493682825" lon="7.91015625000" ikona="https://gmapsapi.com/ikony/norwegia.png" nazwa="Norwegia"/>
	<marker lat="63.704722429433225" lon="26.9824218750" ikona="https://gmapsapi.com/ikony/finlandia.png" nazwa="Finlandia"/>
	<marker lat="51.919438000000000" lon="19.1451360000" ikona="https://gmapsapi.com/ikony/polska.png" nazwa="Polska"/>
	<marker lat="51.163475000000000" lon="10.4542390000" ikona="https://gmapsapi.com/ikony/niemcy.png" nazwa="Niemcy"/>
	<marker lat="55.012934000000000" lon="-3.4468680000" ikona="https://gmapsapi.com/ikony/uk.png" nazwa="Wielka Brytania"/>
	<marker lat="46.226699000000000" lon="2.20911900000" ikona="https://gmapsapi.com/ikony/francja.png" nazwa="Francja"/>
	<marker lat="39.707186656826540" lon="-6.0644531250" ikona="https://gmapsapi.com/ikony/hiszpania.png" nazwa="Hiszpania"/>
	<marker lat="41.292666000000000" lon="12.5735000000" ikona="https://gmapsapi.com/ikony/wlochy.png" nazwa="Włochy"/>
	<marker lat="48.382802000000000" lon="31.1746100000" ikona="https://gmapsapi.com/ikony/ukraina.png" nazwa="Ukraina"/>
	<marker lat="56.656226493502220" lon="33.6621093750" ikona="https://gmapsapi.com/ikony/rosja.png" nazwa="Rosja"/>
</dane>

Krótka analiza:

  • Między znacznikami <dane> i </dane> zawarte są tagi markerów
  • Każdy marker opisany jest przez jeden tag <marker/>
  • Każdy tag marker zawiera atrybuty: lat, lon, ikona i nazwa, odpowiadające kolejno za: szerokość, długość geograficzną, adres URL ikony oraz nazwę państwa

Znając strukturę pliku XML, możemy przejść do zbudowania funkcji, która przetworzy plik i doda markery na mapę

Pobieranie pliku

Funkcja, służąca do pobierania i parsowania pliku:

function wczytajMarkery()
{
	jx.load('/examples/109/dane1.xml', function(xml)
	{
		/* tutaj będzie kod parsowania */
		alert('Wczytano '+markery.length+' markerów z pliku dane1.xml');
	},'xml','get');
}

Przeglądarka zacznie pobierać plik dane1.xml w tle. Kiedy pobieranie się skończy, zostanie wywołana nienazwana funkcja z jednym argumentem - xml, odpowiadającym zawartości pliku XML.

Parsowanie pliku

Parsowanie to przetwarzanie łańcuchu tekstowego na instrukcje dla komputera. Przeglądarka pobrała plik dane1.xml, teraz musimy jej powiedzieć, co ma z nim zrobić. Poniższy kod musi się znaleźć w linii 5. poprzedniego listingu.

var markery = xml.getElementsByTagName("marker");
for(var i=0; i<markery.length; i++)
{
	var lat			=	parseFloat(markery[i].attributes.getNamedItem("lat").nodeValue);
	var lon			=	parseFloat(markery[i].attributes.getNamedItem("lon").nodeValue);
	var ikona_url	=	markery[i].attributes.getNamedItem("ikona").nodeValue;
	var nazwa		=	markery[i].attributes.getNamedItem("nazwa").nodeValue;
	var marker		=	dodajMarker(lat,lon,ikona_url,nazwa);
}
  • W linii 1. tworzymy zmienną markery, i przypisujemy do niej wszystkie obiekty z tagiem marker (patrz przykład dane1.xml)
  • W liniach 4-6 znajduje się instrukcja, która wykonuje pewne operacje dla każdego znalezionego w pliku dane1.xml markera
  • W liniach 4-5 pobieramy zawartość atrybutu lat i lon, konwertujemy je do liczby zmiennoprzecinkowej, a następnie przypisujemy odpowiedniej zmiennej
  • W liniach 6-7 wykonujemy analogiczne operacje dla adresu URL ikony i dla nazwy, przy czym nie robimy konwersji, bo dane są już w postaci stringa
  • W linii 8 wywołujemy funkcję dodającą marker na mapę z odpowiednimi argumentami

Pozostaje tylko napisać funkcję dodającą marker, oraz przygotować odpowiednie pliki graficzne, zgodne ze ścieżkami, które są w pliku dane1.xml

Po zapoznaniu się z poprzednimi częściami kursu, własna funkcja nie powinna stanowić problemu:

Zobacz także:
function dodajMarker(lat,lon,ikona_url,nazwa)
{
    var rozmiar = new google.maps.Size(30,23);   
    var punkt_startowy = new google.maps.Point(0,0);   
    var punkt_zaczepienia = new google.maps.Point(15,12);   
       
    var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia); 
	
	var marker	=	new google.maps.Marker(
		{
			position: new google.maps.LatLng(lat,lon),
			title: nazwa,
			icon: ikona,
			map: mapa
		}
	);
	marker.txt	=	'Wybrane państwo:<br /><strong>'+nazwa+'</strong>';
	
	google.maps.event.addListener(marker,"click",function()
	{
		dymek.setPosition(marker.getPosition());
		dymek.setContent(marker.txt);
		dymek.open(mapa);
	});
	return marker;
}

Pełny kod wraz z dzialającym przykładem dostępny jest tutaj: