Listopad 2007
Cel
Internet jest pełen społeczności skupionych wokół lokalizacji geograficznych i zainteresowań: osób, które uwielbiają muzea, europejskie katedry, parki stanowe itp. W związku z tym zawsze potrzebujesz pomocy programisty, który tworzy (np. Ciebie) system, w którym użytkownicy mogą dodawać do swoich map miejsca oznaczone tagami geograficznymi – właśnie to zrobimy. Na końcu tego artykułu znajduje się system, w którym użytkownicy mogą się rejestrować, logować i dodawać miejsca oznaczone geotagami. System będzie używać AJAX na potrzeby interfejsu użytkownika, języka PHP do obsługi skryptów po stronie serwera oraz arkuszy kalkulacyjnych Google do przechowywania danych. Jeśli wolisz korzystać z baz danych MySQL, możesz łatwo zmodyfikować tu kod, aby zamiast nich używać backendu bazy danych MySQL.
Ten artykuł jest podzielony na następujące etapy:
- Konfigurowanie arkusza kalkulacyjnego
- Korzystanie z platformy Zend Gdata
- Tworzenie funkcji globalnych
- Rejestrowanie nowego użytkownika
- Logowanie użytkownika
- Umożliwianie użytkownikom dodawania miejsc na mapie
- Tworzenie mapy
- Podsumowanie
Konfiguracja arkusza kalkulacyjnego
Będziemy używać Arkuszy kalkulacyjnych Google do przechowywania wszystkich danych dotyczących tego systemu. Istnieją 2 typy danych: informacje o koncie użytkownika i miejsca dodane przez użytkowników, więc utworzymy jeden arkusz dla każdego typu danych. Będziemy pracować z arkuszami za pomocą pliku danych z listami, który opiera się na pierwszym wierszu arkusza z etykietami kolumn oraz na każdym kolejnym wierszu zawierającym dane.
Wejdź na docs.google.com i utwórz nowy arkusz kalkulacyjny. Zmień nazwę domyślnego arkusza na „Użytkownicy” i utwórz kolumny o nazwie „użytkownik”, „hasło” i „sesja”. Następnie dodaj kolejny arkusz, zmień jego nazwę na „Lokalizacje” i utwórz kolumny o nazwach „użytkownik”, „stan”, „lat”, „lng” i „data”. Jeśli nie czujesz się na siłach, pobierz ten szablon i zaimportuj go do Arkuszy Google, używając polecenia Plik->Importuj.
Informacje o koncie użytkownika muszą pozostać prywatne (widoczne tylko dla właściciela arkusza kalkulacyjnego), a miejsca dodane przez użytkownika będą wyświetlane na publicznej mapie. Na szczęście Arkusze kalkulacyjne Google umożliwiają selektywne decydowanie, które arkusze w arkuszu kalkulacyjnym mogą być publiczne, a które powinny pozostać prywatne (domyślnie). Aby opublikować arkusz „Lokalizacje”, kliknij kolejno kartę „Opublikuj” i „Opublikuj teraz”, a następnie w menu „Które części?” wybierz „Tylko lokalizacje” w arkuszu. Odpowiednie opcje są pokazane na zrzucie ekranu poniżej:
Praca z platformą Zend GData
Interfejs API arkuszy kalkulacyjnych Google udostępnia interfejs HTTP do operacji CRUD, takich jak pobieranie wierszy, wstawianie wierszy, aktualizowanie i usuwanie wierszy. Zend Framework tworzy obwódkę JavaScript na interfejsów API (i inne interfejsy API GData), dzięki czemu nie musisz implementować nieprzetworzonych operacji HTTP. Zend Framework wymaga PHP 5.
Jeśli jeszcze nie masz platformy Zend, pobierz ją i prześlij na swój serwer. Platforma jest dostępna tutaj: http://framework.zend.com/download/gdata.
Zmodyfikuj skrypt PHP include_path, aby uwzględnić bibliotekę Zend. Możesz to zrobić na kilka sposobów, zależnie od posiadanych uprawnień administratora do serwera. Jednym ze sposobów jest dodanie tego wiersza powyżej instrukcji wymaganych w plikach PHP korzystających z biblioteki:
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
Aby przetestować tę funkcję, uruchom demonstrację Arkuszy kalkulacyjnych, wpisując ją w wierszu poleceń w folderze demos/Zend/Gdata:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
Jeśli funkcja działa, powinna pojawić się lista arkuszy kalkulacyjnych. Jeśli pojawi się błąd, sprawdź, czy ścieżka uwzględniania jest włączona i czy masz zainstalowany język PHP 5.
Tworzenie funkcji globalnych
Wszystkie skrypty PHP napisane do mapy społeczności będą zawierać typowe zmienne, zmienne i funkcje, które zostaną umieszczone w jednym pliku.
Na początku pliku znajdują się instrukcje niezbędne do uwzględnienia i załadowania biblioteki Zend pobranej z przykładowego arkusza kalkulacyjnego.
Następnie zdefiniujemy stałe wartości, które będą używane w plikach: klucz arkusza kalkulacyjnego i dwa identyfikatory arkuszy. Aby znaleźć informacje dotyczące arkusza kalkulacyjnego, otwórz go, kliknij kartę „Publikowanie”, a następnie kliknij „Więcej opcji publikowania”. Z listy „Format pliku” wybierz „ATOM” i kliknij „Generuj URL”. Zobaczysz coś takiego:
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
Klucz arkusza kalkulacyjnego to długi ciąg alfanumeryczny po „/list/”, a identyfikator arkusza to ciąg 3 znaków, Aby znaleźć identyfikator innego arkusza, wybierz go w menu „Które arkusze?”
Następnie utworzymy 3 funkcje: clientClient, getWkshtListFeed i printFeed. W konfiguracji ClientClient ustawimy nazwę użytkownika Gmaila i hasło, uwierzytelnimy się za pomocą ClientLogin i zwrócimy obiekt Zend_Gdata_Arkuszy. W getWkshtListFeed zwracamy plik z listą arkuszy kalkulacyjnych dla danego klucza i identyfikatora arkusza kalkulacyjnego. Zawiera on opcjonalne zapytanie w arkuszu kalkulacyjnym (link). Funkcja PrintFeed została zaczerpnięta z przykładowego arkusza kalkulacyjnego ClientLogin.php. Może się przydać podczas debugowania. Przejmie on plik danych i wydrukuje go na ekranie.
Poniżej znajdziesz instrukcje, jak to zrobić. (communitymap_globals.php):
<?php
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Spreadsheets');
Zend_Loader::loadClass('Zend_Http_Client');
define("SPREADSHEET_KEY", "o16162288751915453340.4016005092390554215");
define("USER_WORKSHEET_ID", "od6");
define("LOC_WORKSHEET_ID", "od7");
function setupClient() {
$email = "your.name@gmail.com";
$password = "yourPassword";
$client = Zend_Gdata_ClientLogin::getHttpClient($email, $password,
Zend_Gdata_Spreadsheets::AUTH_SERVICE_NAME);
$gdClient = new Zend_Gdata_Spreadsheets($client);
return $gdClient;
}
function getWkshtListFeed($gdClient, $ssKey, $wkshtId, $queryString=null) {
$query = new Zend_Gdata_Spreadsheets_ListQuery();
$query->setSpreadsheetKey($ssKey);
$query->setWorksheetId($wkshtId);
if ($queryString !== null) {
$query->setSpreadsheetQuery($queryString);
}
$listFeed = $gdClient->getListFeed($query);
return $listFeed;
}
function printFeed($feed)
{
print "printing feed";
$i = 0;
foreach($feed->entries as $entry) {
if ($entry instanceof Zend_Gdata_Spreadsheets_CellEntry) {
print $entry->title->text .' '. $entry->content->text . "\n";
} else if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
print $i .' '. $entry->title->text .' '. $entry->content->text . "\n";
} else {
print $i .' '. $entry->title->text . "\n";
}
$i++;
}
}
?>
Rejestrowanie nowego użytkownika
Aby można było zarejestrować nowego użytkownika, potrzebna będzie strona HTML widoczna dla użytkowników z polami tekstowymi i przyciskiem przesyłania oraz skryptem w języku PHP w celu dodania użytkownika do arkusza.
W skrypcie PHP najpierw uwzględniamy skrypt globalny, a następnie pobieramy nazwę użytkownika i hasło ze zmiennej GET. Następnie konfigurujemy arkusz kalkulacyjny klienta i zgłaszamy żądanie pliku danych z listą arkuszy kalkulacyjnych z ciągami zapytań, aby ograniczyć wyniki tylko do tych wierszy, w których nazwa użytkownika jest taka sama jak nazwa użytkownika przekazana do skryptu. Jeśli w pliku danych z listą nie otrzymamy żadnych wierszy, będziemy mogli spokojnie kontynuować sprawdzanie, czy dana nazwa użytkownika jest niepowtarzalna. Przed wstawieniem wiersza w pliku danych listy tworzymy powiązaną tablicę wartości kolumn: nazwa użytkownika, szyfrowanie hasła za pomocą funkcji SHA1 języka PHP i znak wypełniacza sesji. Wywołujemy funkcję insertRow (klient) w arkuszu kalkulacyjnym i przekazujemy tablicę korelacyjną, klucz arkusza kalkulacyjnego oraz identyfikator arkusza. Jeśli zwrócony obiekt to element ListFeedEntry, zwracamy komunikat o powodzeniu.
Poniżej znajdziesz instrukcje, jak to zrobić. (communitymap_newuser.php):
<?php
require_once 'communitymap_globals.php';
$username = $_GET['username'];
$password = $_GET['password'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
$totalResults = $listFeed->totalResults;
if ( $totalResults != "0") {
// Username already exists
exit;
}
$rowArray["user"] = $username;
$rowArray["password"] = sha1($password);
$rowArray["session"] = "a";
$entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, USER_WORKSHEET_ID);
if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo "Success!";
}
?>
Na stronie rejestracji możemy włączyć interfejs API Map Google, aby umożliwić nam korzystanie z kodu XMLHttpRequest o nazwie GDownloadUrl. Gdy użytkownik kliknie przycisk przesyłania, pobierze nazwę użytkownika i hasło z pól tekstowych, utworzy ciąg parametrów na podstawie ich wartości i wywoła metodę GDownloadUrl pod adresem URL skryptu i parametrami. Wysyłamy informacje poufne, więc używamy wersji POST protokołu HTTP w GDownloadUrl (wysyłając parametry jako trzeci argument, zamiast dołączać je do adresu URL). W ramach funkcji wywołania zwrotnego sprawdzamy, czy odpowiedź została zrealizowana, i wyświetlamy użytkownikowi odpowiedni komunikat.
Poniżej znajdziesz zrzut ekranu i kod przykładowej strony rejestracji (communitymap_register.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Community Map - Register/Login </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
<script type="text/javascript">
function register() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "communitymap_newuser.php?";
var params = "username=" + username + "&password=" + password;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 1) {
document.getElementById("message").innerHTML = "Successfully registered." +
"<a href='communitymap_login.htm'>Proceed to Login</a>.";
} else {
document.getElementById("message").innerHTML = "Username already exists. Try again.";
}
}, params);
}
</script>
</head>
<body>
<h1>Register for Community Map</h1>
<input type="text" id="username">
<input type="password" id="password">
<input type="button" onclick="register()" value="Register">
<div id="message"></div>
</body>
</html>
Logowanie użytkownika
Aby umożliwić użytkownikom logowanie się do naszego systemu, oczekujemy, że użytkownicy zobaczą stronę HTML z prośbą o podanie nazwy użytkownika i hasła. Dodatkowo skrypt PHP będzie mógł zweryfikować informacje logowania, utworzyć identyfikator sesji i przekazać go z powrotem na stronę logowania w celu utworzenia pliku cookie. Na kolejnych stronach użytkownik pozostaje zalogowany za pomocą pliku cookie sesji.
W skrypcie PHP najpierw uwzględniamy skrypt globalny, a następnie pobieramy nazwę użytkownika i hasło ze zmiennej GET. Następnie konfigurujemy arkusz kalkulacyjny klienta i zgłaszamy żądanie pliku danych z listą arkuszy kalkulacyjnych z ciągami zapytań, aby ograniczyć wyniki tylko do tych wierszy, w których nazwa użytkownika jest taka sama jak nazwa użytkownika przekazana do skryptu.
W wierszu, który jest zwrócony, sprawdzimy, czy hasz hasła, który został przekazany, pasuje do skrótu zapisanego w arkuszu kalkulacyjnym. Jeśli tak, utworzymy identyfikator sesji za pomocą funkcji md5, uniqid i rand. Zaktualizujemy ten wiersz w arkuszu kalkulacyjnym i wyświetlimy go na ekranie, jeśli aktualizacja wiersza się powiedzie.
Poniżej znajdziesz odpowiednie instrukcje w języku PHP (communitymap_loginuser.php):
<?php
require_once 'communitymap_globals.php';
$username = $_POST['username'];
$password = $_POST['password'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
$password_hash = sha1($password);
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="password" && $customEntry->getText()==$password_hash) {
$updatedRowArray["user"] = $username;
$updatedRowArray["password"] = sha1($password);
$updatedRowArray["session"] = md5(uniqid(rand(), true));
$updatedRow = $gdClient->updateRow($row, $updatedRowArray);
if ($updatedRow instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo $updatedRowArray["session"];
}
}
}
?>
Na stronie logowania możemy ponownie dodać interfejs API Map Google, aby używać funkcji kodu XMLHttpRequest o nazwie GDownloadUrl. Gdy użytkownik kliknie przycisk przesyłania, pobierze nazwę użytkownika i hasło z pól tekstowych, utworzy adres URL skryptu z parametrami zapytania i wywoła adres GDownloadUrl z adresu URL skryptu. W funkcji wywołania zwrotnego ustawiamy plik cookie z identyfikatorem sesji, który jest zwracany przez skrypt, lub zwracamy komunikat o błędzie, jeśli nie został zwrócony. Funkcja setCookie pochodzi z pliku cookie.js opartego na samouczku w języku JavaScript w3c: http://www.w3schools.com/js/js_cookies.asp.
Poniżej znajdziesz zrzut ekranu i kod przykładowej strony logowania (communitymap_login.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Community Map - Login</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
<script src="cookies.js" type="text/javascript"></script>
<script type="text/javascript">
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "communitymap_loginuser.php?username=" + username + "&password=" + password;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 1) {
setCookie("session", data, 5);
} else {
document.getElementById("nessage").innerHTML = "Error. Try again.";
}
});
}
</script>
</head>
<body>
<h1>Login for Community Map</h1>
<input type="text" id="username">
<input type="password" id="password">
<input type="button" onclick="login()" value="Login">
<div id="message"></div>
</body>
</html>
Zezwalanie użytkownikom na dodawanie miejsc na mapie
Aby użytkownik mógł dodawać miejsca do naszej mapy, potrzebujemy strony HTML przeznaczonej dla użytkowników, która zawiera informacje o lokalizacji, oraz dwóch skryptów PHP – jednego, który sprawdza, czy użytkownik jest zalogowany za pomocą ustawionego pliku cookie, a drugiego – arkusza z lokalizacją.
W pierwszym skrypcie PHP sprawdzającym, czy użytkownik jest zalogowany, najpierw uwzględniamy skrypt globalny, a następnie pobieramy wartość sesji ze zmiennej GET. Następnie konfigurujemy arkusz kalkulacyjny w usłudze Arkusze Google i wysyłamy żądanie pliku danych z listą arkuszy kalkulacyjnych użytkowników z ciągiem zapytania, aby ograniczyć wyniki tylko do tych wierszy, w których kolumna sesji jest równa wartości sesji przekazywanej do skryptu. Następnie powtarzamy niestandardowe wpisy w tym pliku danych (odpowiadające naszym nagłówkom kolumn) i drukujemy odpowiednią nazwę użytkownika dla danej sesji, jeśli taki istnieje.
Poniżej znajdziesz odpowiednie instrukcje w języku PHP (communitymap_checksession.php):
<?php
require_once 'communitymap_globals.php';
$session = $_GET['session'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));
if ( count($listFeed->entries) > 0) {
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="user") {
echo $customEntry->getText();
}
}
}
?>
W drugim skrypcie PHP, który umożliwia użytkownikowi dodanie lokalizacji, najpierw powielamy kod z Twojej społeczności. Po otrzymaniu z arkusza użytkowników prawidłowej nazwy użytkownika pobieramy wartości miejsca, szerokości i długości z zmiennej GET. Wszystkie te wartości umieszczamy w tablicy korelacji, a wartość „date” jest dodawana za pomocą funkcji PHP(), dzięki czemu wiemy, kiedy użytkownik dodał miejsce. Przekazujemy tę tablicę cząstkową, stałą kluczyka arkuszy kalkulacyjnych i stałą identyfikatora arkusza z lokalizacjami do funkcji InsertRow. Następnie, jeśli wiersz arkusza dotyczący nowej lokalizacji został dodany do arkusza kalkulacyjnego, zwracana jest wartość „Success”. Jeśli w tym kroku widzisz błąd, prawdopodobnie wynika to z niezgodności nazw nagłówków kolumn. Klucze w tablicy powiązania muszą być zgodne z nagłówkami kolumn w arkuszu określonym przez klucz arkusza kalkulacyjnego i identyfikator arkusza.
Plik PHP, który to umożliwia, znajduje się poniżej (communitymap_addlocation.php):
<?php
require_once 'communitymap_globals.php';
$session = $_GET['session'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));
if ( count($listFeed->entries) > 0) {
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="user") {
$user = $customEntry->getText();
}
}
$place = $_GET['place'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$rowArray["user"] = $user;
$rowArray["place"] = $place;
$rowArray["lat"] = $lat;
$rowArray["lng"] = $lng;
$rowArray["date"] = date("F j, Y, g:i a");
$entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, LOC_WORKSHEET_ID);
if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo "Success!\n";
}
}
?>
Na stronie dodawania lokalizacji możemy ponownie uwzględnić interfejs API Map Google. Umożliwi nam to użycie GDownloadUrl i utworzenie mapy. Po załadowaniu strony używamy wartości getCookie z pliku cookie.js, aby pobrać wartość sesji. Jeśli ciąg sesji jest pusty lub zawiera pusty tekst, wyświetla się komunikat o błędzie. Jeśli nie, wywołamy GDownloadUrl na mapie.checksession.php, wysyłając sesję. Jeśli operacja się powiedzie, użytkownik zobaczy komunikat powitalny, wyświetli formularz dodawania lokalizacji i wczyta mapę. Formularz składa się z pola tekstowego adresu, mapy oraz pól tekstowych dotyczących nazwy miejsca, szerokości i długości geograficznej. Jeśli użytkownik nie zna jeszcze szerokości i długości geograficznej lokalizacji, może ją przypisać do danych geograficznych, wpisując swój adres w formularzu i klikając „Prześlij”. Spowoduje to wysłanie wywołania do obiektu GClientGeocoder interfejsu API Map Google, który umieści znacznik na mapie, gdy znajdzie adres, i automatycznie wypełni pola tekstowe szerokości i długości geograficznej.
Kiedy użytkownik jest zadowolony, może nacisnąć przycisk „Dodaj lokalizację”. Następnie w kodzie JavaScript pobieramy wartości parametrów user, Place, Lat i Lng i wysyłamy je do skryptu Communitymap_addlocation.php za pomocą GDownloadUrl.
Jeśli skrypt się powiedzie, na ekranie wyświetli się komunikat o powodzeniu.
Poniżej znajdziesz zrzut ekranu i kod przykładowej strony z lokalizacją (communitymap_addlocation.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Community Map - Add a Place!</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdef" type="text/javascript"></script>
<script src="cookies.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
var session = null;
function load() {
session = getCookie('session');
if (session != null && session != "") {
url = "communitymap_checksession.php?session=" + session;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 0) {
document.getElementById("message").innerHTML = "Welcome " + data;
document.getElementById("content").style.display = "block";
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
});
} else {
document.getElementById("message").innerHTML = "Error: Not logged in.";
}
}
function addLocation() {
var place = document.getElementById("place").value;
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
var url = "communitymap_addlocation.php?session=" + session + "&place=" + place +
"&lat=" + lat + "&lng=" + lng;
GDownloadUrl(url, function(data, responseCode) {
GLog.write(data);
if (data.length > 0) {
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point, {draggable:true});
document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);
});
}
}
);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="message"></div>
<div id="content" style="display:none">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Geocode!" />
</form>
</p>
<div id="map" style="width: 500px; height: 300px"></div>
Place name: <input type="text" size="20" id="place" value="" />
<br/>
Lat: <input type="text" size="20" id="lat" value="" />
<br/>
Lng: <input type="text" size="20" id="lng" value="" />
<br/>
<input type="button" onclick="addLocation()" value="Add a location" />
</form>
</div>
</body>
</html>
Tworzenie mapy
Ponieważ pierwszy arkusz lokalizacji został udostępniony publicznie, w celu utworzenia mapy nie jest wymagane programowanie po stronie serwera. W rzeczywistości nie jest to wymagane. Możesz użyć tego arkusza kalkulacyjnego -> Kreator mapy – wygeneruje on cały kod potrzebny do danej mapy. Kreator pobiera wpisy z arkusza w witrynie, dołączając tag skryptu, który wskazuje dane wyjściowe pliku danych JSON, i określa funkcję wywołania zwrotnego, która zostaje pobrana po pobraniu pliku JSON. Więcej informacji znajdziesz tutaj.
Przykładowy kod HTML do tego celu znajdziesz tutaj: mainmap.htm. Poniżej znajdziesz zrzut ekranu:
Podsumowanie
Mamy nadzieję, że teraz na swoim serwerze będziesz mieć własny system mapowy udostępniany przez użytkowników. W tym artykule przedstawiamy podstawowy kod niezbędny do obsługi najważniejszych funkcji tego systemu. Teraz gdy już wiesz, czym jest biblioteka arkuszy kalkulacyjnych Zend, możesz dostosować system do swoich potrzeb. Jeśli natrafisz na błędy, pamiętaj, że do debugowania kodu możesz użyć polecenia echo w języku PHP lub GLog.write() w interfejsie API Map Google. Aby uzyskać dodatkową pomoc, zawsze możesz opublikować na forach dla interfejsu API Map Google lub Arkuszy API.