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 poradników

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: https://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('https://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.1