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 JSON

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy kategorii

W dotychczasowych rozwiązaniach, formatem używanym do przekazywania danych był XML. W tej części kursu skorzystamy z innego wariantu - jako format wymiany danych posłuży nam JSON.

Co to jest JSON i dlaczego go stosować?

JSON (skrót od JavaScript Object Notation, wymowa tak jak imię Jason) to lekki format wymiany danych, będący podzbiorem języka JavaScript. W dużym uproszczeniu, dane przesyłane w tym formacie wyglądają jak tablica JavaScript. Przewaga JSONa nad XMLem sprowadza się do kilku zasadniczych punktów:

  • znacznie łatwiejszy i szybszy dostęp do danych z poziomu JavaScript
  • prostsza analiza składniowa
  • wbudowana funkcja eval() do parsowania danych

Do wad JSONa należy zaliczyć większą podatność w dziedzinie bezpieczeństwa - jeżeli użytkownik ma może we własnym zakresie bez weryfikacji modyfikować dane przesyłane w takim pliku, to szczególną uwagę należy poświęcić na przefiltrowanie wprowadzanych danych, by nie zawierały kodu języka JavaScript.

Wymagania

Pomimo, iż składnia JSONa jest dość prosta, zalecam użycie skryptu PHP do generowania treści na podstawie tablicy z danymi w PHP. Przykładem jest darmowy skrypt, dostępny pod tym adresem: http://mike.teczno.com/JSON/JSON.phps.

Dane markerów w JSON

Najpierw stworzymy plik dane.php, w którym pobierzemy dane markerów z bazy danych (te same dane co w tym przykładzie). Pierwszą rzeczą jest dołączenie pliku jsonencoder.php (zawartość pod tym adresem), znajdującego się w tym samym katalogu co plik dane.php:


include('jsonencoder.php');

$json = new Services_JSON();

Tworzymy nowy obiekt klasy Services_JSON. Posiada on metodę encode(), dzięki której później wygenerujemy zawartość pliku. Łączenie się z bazą i wybór pól z tabeli wygląda następująco:


$user="nazwa_użytkownika";

$pass="hasło_użytkownika";

$baza="nazwa_bazy";



mysql_connect ("localhost", $user, $pass) or 

	die ("Nie nawiązano połączenie z bazą MySQL");

mysql_select_db ($baza) or 

	die ("Nie nawiązano połączenia z bazą serwisu.");

	

mysql_query("SET NAMES 'UTF8';");



$zapytanie = "SELECT id,nazwa,lat,lng,flaga FROM PoznajGoogleMaps_panstwa ORDER BY id";

$pobierz = mysql_query($zapytanie);

Dane markerów z bazy będziemy przechowywać w tablicy $tablica. Oto, jak ją zapełnić:


while($dane = mysql_fetch_array($pobierz))

{

	$panstwo = array(

	'nazwa' => $dane['nazwa'],

	'lat' => (float) $dane['lat'],

	'lng' => (float) $dane['lng'],

	'ikona' => $dane['flaga']

	);

	array_push($tablica,$panstwo);

}

Po tej operacji mamy tablicę, w której kolejnymi rekordami są poszczególne państwa. Zwróć uwagę, że długość i szerokość geograficzną traktujemy jako zmienne typu float, dzięki czemu w przesyłanym pliku będą one traktowane jako liczby, a nie jako tekst.

Pozostało wygenerowanie treści i wydrukowanie jej:


$wynik = $json->encode($tablica);

print($wynik);

Kod skryptu dane.php znajduje się pod tym adresem, a efekt jego działania da coś takiego:


[{"nazwa":"Szwecja","lat":62.021528,"lng":16.699219,"ikona":"http:\/\/gmapsapi.com\/ikony\/szwecja.png"},{"nazwa":"Norwegia","lat":61.4387674937,"lng":7.91015625,"ikona":"http:\/\/gmapsapi.com\/ikony\/norwegia.png"},{"nazwa":"Finlandia","lat":63.233627,"lng":26.894531,"ikona":"http:\/\/gmapsapi.com\/ikony\/finlandia.png"},{"nazwa":"Polska","lat":52.05249,"lng":19.863281,"ikona":"http:\/\/gmapsapi.com\/ikony\/polska.png"},{"nazwa":"Niemcy","lat":50.847573,"lng":10.019531,"ikona":"http:\/\/gmapsapi.com\/ikony\/niemcy.png"},{"nazwa":"Wielka Brytania","lat":55.012934,"lng":-3.446868,"ikona":"http:\/\/gmapsapi.com\/ikony\/uk.png"},{"nazwa":"Francja","lat":47.754098,"lng":2.109375,"ikona":"http:\/\/gmapsapi.com\/ikony\/francja.png"},{"nazwa":"Hiszpania","lat":39.7071866568,"lng":-6.064453125,"ikona":"http:\/\/gmapsapi.com\/ikony\/hiszpania.png"},{"nazwa":"W\u0142ochy","lat":41.902277,"lng":14.765625,"ikona":"http:\/\/gmapsapi.com\/ikony\/wlochy.png"},{"nazwa":"Ukraina","lat":48.382802,"lng":31.17461,"ikona":"http:\/\/gmapsapi.com\/ikony\/ukraina.png"},{"nazwa":"Rosja","lat":57.704147,"lng":37.792969,"ikona":"http:\/\/gmapsapi.com\/ikony\/rosja.png"}]

Parsowanie i wyświetlanie

Teraz czas na pobranie tak przygotowanego pliku i jego przeparsowanie. Do pobrania zawartości pliku wykorzystam funkcję $.get, udostępnianą przez bibliotekę jQuery. Do skryptu przykłądu należy dołączyć w nagłówku odniesienie do lokalnej lub zdalnej kopii jQuery, na przykład:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Funkcja pobierająca dane wygląda następująco:

$.get(
'http://gmapsapi.com/examples/122/dane.php', 
function(dane)
{
	var daneJSON = eval('('+dane+')'); // parsowanie
	/* tutaj operacje na naszych danych */
});

Po tej operacji, zmienna daneJSON będzie tablicą, kolejne elementy będą poszczególnymi państwami. Dostęp do danych dla naszego przykładu wygląda następująco:

for(var i=0; i<daneJSON.length; i++)
{
	var lat			=	daneJSON[i].lat; // nie ma potrzeby konwertowania do liczby zmiennoprzecinkowej
	var lon			=	daneJSON[i].lng;
	var ikona_url	=	daneJSON[i].ikona;
	var nazwa		=	daneJSON[i].nazwa;
	
	dodajMarker(mapa, lat, lon, ikona_url, nazwa);
}

Jest to o wiele czytelniejsze niż analogiczna funkcja dla plików XML. Zwróć uwagę, że nie ma konieczności przekształcania szerokości i długości w typ zmiennoprzecinkowy, bo one już tego typu są (zadbaliśmy o to na poziomie PHP). Napisanie funkcji dodającej markery jest już czystą formalnością, sprawdź źródło przykładu 5.1przykład 1pokaż kod przykładu

Przykład 2: polilinie w JSON

Analogicznie, w plikach z JSON można przesłać dane polilinii. W przykładzie 5.2 korzystam ze zmodyfikowanego pliku dane.php, którego treść wygląda następująco:

include('jsonencoder.php');
$json = new Services_JSON();
$tablica = array();
$polilinia1 = array();
array_push($polilinia1, array('lat'=>53.748711, 'lon'=>14.238281));
array_push($polilinia1, array('lat'=>53.258641, 'lon'=>14.425049));
/* i tak po kolei dane wszystkich punktów */
array_push($polilinia1, array('lat'=>53.690201, 'lon'=>14.375610));
array_push($polilinia1, array('lat'=>53.748711, 'lon'=>14.238281));
array_push($tablica,$polilinia1);
$wynik = $json->encode($tablica);
print($wynik);

Główna tablica będzie zawierać elementy - kolejne polilinie (w tym przykładzie jest tylko jedna), a każda z polilinii będzie zawierać elementy, odpowiadające za jej kolejne wierzchołki. Oto rezultat, jaki zwróci skrypt po wywołaniu:


[[{"lat":53.748711,"lon":14.238281},{"lat":53.258641,"lon":14.425049},{"lat":53.067627,"lon":14.304199},{"lat":52.975108,"lon":14.161377},{"lat":52.882391,"lon":14.161377},{"lat":52.716331,"lon":14.425049},{"lat":52.57635,"lon":14.633789},{"lat":52.375599,"lon":14.556885},{"lat":52.234528,"lon":14.710693},{"lat":52.099757,"lon":14.699707},{"lat":51.842566,"lon":14.567871},{"lat":51.618017,"lon":14.743652},{"lat":51.508742,"lon":14.732666},{"lat":51.44716,"lon":14.963379},{"lat":51.206883,"lon":15.007324},{"lat":50.889174,"lon":14.820557},{"lat":50.889174,"lon":14.93042},{"lat":51.062113,"lon":15.095215},{"lat":50.937662,"lon":15.292969},{"lat":50.805935,"lon":15.380859},{"lat":50.659908,"lon":16.062012},{"lat":50.659908,"lon":16.369629},{"lat":50.464498,"lon":16.237793},{"lat":50.120578,"lon":16.622314},{"lat":50.282319,"lon":16.984863},{"lat":50.478483,"lon":16.875},{"lat":50.282319,"lon":17.402344},{"lat":50.275299,"lon":17.753906},{"lat":50.148746,"lon":17.611084},{"lat":49.986552,"lon":17.86377},{"lat":49.94415,"lon":18.347168},{"lat":49.731581,"lon":18.665771},{"lat":49.518076,"lon":18.896484},{"lat":49.396675,"lon":19.072266},{"lat":49.61071,"lon":19.500732},{"lat":49.439557,"lon":19.610596},{"lat":49.21042,"lon":19.775391},{"lat":49.224773,"lon":20.10498},{"lat":49.4467,"lon":20.621338},{"lat":49.317961,"lon":20.928955},{"lat":49.396675,"lon":21.126709},{"lat":49.468124,"lon":21.434326},{"lat":49.382373,"lon":21.939697},{"lat":49.174522,"lon":22.159424},{"lat":49.030665,"lon":22.851563},{"lat":49.174522,"lon":22.763672},{"lat":49.589349,"lon":22.664795},{"lat":50.373496,"lon":23.653564},{"lat":50.464498,"lon":23.972168},{"lat":50.736455,"lon":24.016113},{"lat":50.840636,"lon":23.950195},{"lat":50.903033,"lon":24.158936},{"lat":51.268789,"lon":23.752441},{"lat":51.488224,"lon":23.598633},{"lat":51.672555,"lon":23.521729},{"lat":51.849353,"lon":23.598633},{"lat":52.086257,"lon":23.69751},{"lat":52.187405,"lon":23.411865},{"lat":52.281602,"lon":23.181152},{"lat":52.476089,"lon":23.378906},{"lat":52.649729,"lon":23.708496},{"lat":52.722986,"lon":23.818359},{"lat":52.915527,"lon":23.928223},{"lat":53.363665,"lon":23.719482},{"lat":53.904338,"lon":23.554688},{"lat":54.13026,"lon":23.499756},{"lat":54.278055,"lon":23.312988},{"lat":54.335744,"lon":23.071289},{"lat":54.425322,"lon":22.884521},{"lat":54.393352,"lon":22.598877},{"lat":54.367759,"lon":20.643311},{"lat":54.444492,"lon":19.819336},{"lat":54.239551,"lon":19.390869},{"lat":54.354956,"lon":19.171143},{"lat":54.367759,"lon":18.775635},{"lat":54.521081,"lon":18.511963},{"lat":54.756331,"lon":18.4021},{"lat":54.616617,"lon":18.753662},{"lat":54.851315,"lon":18.369141},{"lat":54.838664,"lon":17.918701},{"lat":54.692884,"lon":17.171631},{"lat":54.470038,"lon":16.314697},{"lat":54.284469,"lon":16.12793},{"lat":54.194583,"lon":15.534668},{"lat":53.988395,"lon":14.589844},{"lat":53.90528,"lon":14.25889},{"lat":53.868725,"lon":14.551392},{"lat":53.768196,"lon":14.589844},{"lat":53.68529,"lon":14.51052},{"lat":53.690201,"lon":14.37561},{"lat":53.748711,"lon":14.238281}]]

Sposób parsowania i wyciągania danych:

var daneJSON = eval('('+dane+')');
for(var i=0; i < daneJSON.length; i++)
{
	var punkty_polilinia=[]; // pomocnicza tablica z punktami polilinii
	
	for(var j=0; j<daneJSON[i].length; j++)
	{
		var lat = daneJSON[i][j].lat; // nie ma potrzeby konwertowania do liczby zmiennoprzecinkowej
		var lon = daneJSON[i][j].lon;
		punkty_polilinia.push(new google.maps.LatLng(lat,lon));
	}

	dodajPolilinie(mapa, punkty_polilinia);
}

Funkcja do wyświetlenia polilinii dodajPolilinie jest bardzo prosta:

function dodajPolilinie(mapa, punkty)
{		
	if (punkty[0].equals(punkty[punkty.length-1]))
	{
		// Jeżeli pierwszy i ostatni punkt są identyczne, to rysujemy polilinię z wypełnieniem:
		var polilinia = new google.maps.Polygon({
			map:            mapa,
			path:           punkty,
			strokeColor:    '#ff0000',
			fillColor:		'#ff0000',
			fillOpacity:	0.2,
			strokeWeight:   3
		});
	}
	else
	{
		// a jeżeli nie, to bez wypełnienia:
		var polilinia = new google.maps.Polyline({
			map:            mapa,
			path:           punkty,
			strokeColor:    '#ff0000',
			strokeWeight:   3
		});
	}
}

A oto działanie przykładu: przykład 2pokaż kod przykładu

Uwagi

Jeśli zwracane dane są tworzone przez użytkowników, upewnij się, że są przefiltrowane pod względem potencjalnie niebezpiecznych fragmentów kodu JavaScript. Pamiętaj też, że ze względu na bezpieczeństwo, przeglądarka nie pozwoli pobrać za pomocą AJAXa pliku, znajdującego się w innej domenie niż ta, z której wywołano skrypt.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie znaczników na mapę

API v3

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


Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?


Wczytywanie danych z pliku XML

API v3

Kurs podstaw cz. X: Omówienie wczytywania danych z pliku XML za pomocą AJAXa