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

« 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.

Do pobierania plików w tle służy funkcja GDownloadUrl, która przyjmuje dwa argumenty - nazwę pliku do pobrania (string), oraz funkcję, która zostanie wykonana po pobraniu pliku. Ta funkcja przyjmie z kolei dwa argumenty - zwrócony text, oraz kod odpowiedzi (np. 200 - OK, 404 - Nie znaleziono itp.).

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

Najpierw nakażemy pobrać przeglądarce plik dane1.xml:

GDownloadUrl('/examples/045/dane1.xml', function(dane,kodOdpowiedzi)
{
	if(kodOdpowiedzi==200)
	{
		// tutaj będzie kod do parsowania
	}
	else
	{
		alert('Nie mogłem otworzyć pliku dane1.xml');
	}
});

Przeglądarka zacznie pobierać plik dane1.xml w tle. Kiedy pobieranie się skończy, zostanie wywołana funkcja z dwoma argumentami - dane, czyli zawartość pliku, oraz kodOdpowiedzi, czyli kod odpowiedzi. Jeśli kod odpowiedzi wynosi 200 (to znaczy, pobieranie zakończyło się sukcesem) to wykonamy pewien kod, który napiszemy za chwilkę. Jeśli kodOdpowiedzi był inny (np. 404), to wyświetlimy stosowny komunikat.

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 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 ikona_url = markery[i].getAttribute("ikona");
	var nazwa = markery[i].getAttribute("nazwa");
	var marker = dodajMarker(lat,lon,ikona_url,nazwa);
}
  • W linii 5. parsujemy dane funkcją GXml.parse()
  • W linii 6. tworzymy zmienną markery, i przypisujemy do niej wszystkie obiekty z tagiem marker (patrz przykład dane1.xml)
  • W liniach 7-14 znajduje się funkcja, która wykonuje pewne operacje dla każdego znalezionego w pliku dane1.xml markera
  • W liniach 9-10 pobieramy zawartość atrybutu lat i lon, konwertujemy je do liczby zmiennoprzecinkowej, a następnie przypisujemy odpowiedniej zmiennej
  • W liniach 11-12 wykonujemy analogiczne operacje dla adresu URL ikony i dla nazwy, przy czym nie robimy konwersji, bo dane są już w postaci stringa
  • W linii 13 wywołujemy funkcję dodającą marker na mapę z odpowiednimi atrybutami

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. Pełny kod wraz z dzialającym przykładem dostępny jest tutaj: przykład 1pokaż kod przykładu

Rysowanie polilinii z pliku XML

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ę:

var xml = GXml.parse(dane);
var polilinie = xml.documentElement.getElementsByTagName('polilinia');
for(var i=0; i<polilinie.length; i++)
{
	var punkty = polilinie[i].getElementsByTagName("punkt");
	var punkty_polilinia=[];
	for(var j=0; j<punkty.length; j++)
	{
		var lat = parseFloat(punkty[j].getAttribute("lat"));
		var lon = parseFloat(punkty[j].getAttribute("lon"));
		punkty_polilinia.push(new GLatLng(lat,lon));
	}
	if(punkty_polilinia[0].equals(punkty_polilinia[punkty_polilinia.length-1]))
	{
		// jeśli tak to rysujemy polilinię z wypełnieniem
		var rysuj = new GPolygon(punkty_polilinia,'#ff0000',4,0.7,'#ff0000',0.2);
	}
	else
	{
		// jeśli nie to bez
		var rysuj = new GPolyline(punkty_polilinia,'#ff0000',4,0.7);
	}
	mapa.addOverlay(rysuj);
}

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, wywołujący funkcję GDownloadUrl. 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ł:

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


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)


Wyszukiwanie markerów as-you-type

API v2

Jak stworzyć wyszukiwanie i filtrowanie markerów as-you-type przy użyciu bazy danych