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 kategorii

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

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: przykład 1pokaż kod przykładu

Rysowanie polilinii z pliku XML

Zobacz także:Polilinie

Analogicznie, z pliku XML można pobrać dane punktowe polilinii, by następnie je narysować. Napiszemy aplikację, która wczyta z zewnętrznego pliku dane polilini i ją narysuje. Punkty będą identyczne jak w tym przykładzie. Przyjmijmy następujący format pliku:

<dane>
	<polilinia>
		<punkt lat="53.748711" lon="14.238281"/>
		<punkt lat="53.258641" lon="14.425049"/>
		<punkt lat="53.067627" lon="14.304199"/>
		<punkt lat="52.975108" lon="14.161377"/>
		<punkt lat="52.882391" lon="14.161377"/>
		<punkt lat="52.716331" lon="14.425049"/>
		<!-- i tak dalej i tak dalej -->
	</polilinia>
</dane>

Tag polilinia nie posiada atrybutów, ale ma za to kilka elementów-dzieci. Każdy z nich to jeden punkt polilinii, opisany współrzędnymi z atrybutów lat i lon.

Funkcja parsująca zmieni się:

function wczytajPolilinie()
{
	jx.load('/examples/109/dane2.xml', function(xml)
	{
		var polilinie = xml.getElementsByTagName("polilinia");
		for(var i=0; i<polilinie.length; i++)
		{
			var punkty	= polilinie[i].getElementsByTagName("punkt");
			var wierzcholki = [];
			for(var j=0; j<punkty.length; j++)
			{
				var lat		= parseFloat(punkty[j].attributes.getNamedItem("lat").nodeValue);
				var lon		= parseFloat(punkty[j].attributes.getNamedItem("lon").nodeValue);
				var latlng	= new google.maps.LatLng(lat,lon);
				wierzcholki.push(latlng);
			}
			dodajPolilinie(wierzcholki);
		}
		alert('Wczytano '+polilinie.length+' polilinii z pliku dane2.xml');
	},'xml','get');
}

Dodanie polilinii na mapę to już formalność:

function dodajPolilinie(wierzcholki)
{
	var polilinia = new google.maps.Polygon(
		{
			paths: 			[wierzcholki],
			strokeColor:	'#ff0000',
			strokeOpacity:	0.5,
			strokeWeight:	3,
			fillColor:		'#ff0000',
			fillOpacity:	0.21,
			map: mapa
		}
	);
    return polilinia;
}

Zobacz działający przykład: przykład 2pokaż kod przykładu

Uwagi

  • Plik xml musi być poprawnym plikiem XML. Jego poprawność możesz sprawdzić pod tym adresem.
  • Plik xml musi być na tym samym serwerze co plik, zawierający instrukcję pobierania. Jest to zabezpieczenie przed atakiem typu XSS.
  • W pliku XML musi być dokładnie jeden nadrzędny tag (w tym przykładzie jest to <dane></dane>)

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Geokodowanie adresów

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 v3

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


Dodawanie znaczników na mapę

API v3

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


Geokodowanie adresów

API v3

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


Wyświetlanie informacji na mapie

API v3

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych