Share
In questo tutorial, passeremo attraverso il processo di creazione di un piccolo widget che consente agli utenti di recuperare indicazioni stradali passo-passo in una posizione specifica. Useremo l'API di Google Maps, tramite JavaScript, per fornire questa funzionalità piuttosto avanzata.
L'unico avvertimento con l'utilizzo di Google Maps è che dobbiamo richiedere una chiave API, ma questa è una procedura abbastanza banale se hai già un account Google / GMail. Sfortunatamente, a causa dei requisiti di Google, dobbiamo sviluppare sul dominio che forniamo a Google, ovvero non possiamo svilupparlo su un server locale. Fortunatamente per noi il processo sarà veloce e non passeremo molto tempo sul server live. Inoltre, assicurati di memorizzare la chiave API in un posto sicuro perché non sono riuscito a trovare un modo per recuperarli una volta generato, anche se penso che potresti semplicemente ricreare uno.
Prima di immergerci nel codice, vorrei discutere la ragione di questa idea. Come molti sviluppatori, trascorro molto tempo sul web. Un particolare sottoinsieme di siti web che visito sono aziende locali che certamente non hanno grandi risorse da dedicare al web design, ma si spera che le persone che stanno sviluppando tali siti vedano articoli come questo e rendano conto di quanto sia facile includere un full-optional mappare in qualsiasi pagina web. Quasi tutti i siti Web che rappresentano una piccola azienda hanno una pagina dedicata a dire agli utenti come individuare la loro posizione fisica. Spesso si ottiene una mappa con la loro posizione su di essa, che non aiuta gli utenti che non conoscono l'area. In questo tutorial lo modificheremo e consentiremo agli utenti di inserire il loro indirizzo e ottenere indicazioni stradali passo-passo per qualsiasi indirizzo desideriamo.
Ora che il soapbox è fuori mano, consente di esaminare il codice. La prima cosa che dobbiamo fare è includere la libreria Javascript che contiene tutti i metodi di Google Maps. Probabilmente Google ha generato questo codice quando hai creato la tua chiave API, ma ciò potrebbe indicare l'API versione 3 ancora in fase di beta test. Ecco il link alla versione API 2 assicurati di inserire la tua chiave API. Includeremo anche un file, application.js che manterrà le nostre funzioni personalizzate, ho memorizzato il mio in una directory al livello root chiamato js. Il seguente codice si trova nella sezione principale della pagina.
Nella sezione del corpo della nostra pagina abbiamo bisogno di un margine di profitto limitato. Ripercorrerò brevemente i bit richiesti, e puoi guardare il codice sorgente per vedere il fluff che ho incluso nella mia demo. Il primo elemento è un div vuoto con un ID di map_canvas, questo è il segnaposto a cui puntiamo le chiamate di Google Maps e genererà tutto il markup della mappa all'interno di quell'elemento.
Successivamente ho creato un div per contenere l'indirizzo dell'organizzazione e il modulo per l'utente per inserire il loro indirizzo. Puoi consultare questo codice, ma è piuttosto semplice e non molto difficile da discernere. Assicurati di guardare il mio CSS per vedere come è stilizzato nella mia demo.
Il nostro indirizzo
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Il tuo indirizzo
Si noti che stiamo inviando questa pagina a se stessa questo è così possiamo elaborare la pagina utilizzando PHP se l'utente ha disabilitato JS. Se hanno abilitato JS, vogliamo eseguire una funzione, overlayDirections () che daremo un'occhiata un po 'più tardi. La maggior parte di questo codice va alla casella di selezione che consente all'utente di scegliere il loro stato, l'ho condensato per motivi di stampa di questo articolo, ma puoi scaricare il codice completo dal download. Altre note interessanti sono le impostazioni di taglia e lunghezza massima del campo di testo del codice di avviamento postale a 5. L'ultima cosa da notare è che abbiamo assegnato identificativi e nomi a tutti gli elementi del modulo.
Bene, ora possiamo entrare nella carne di questo tutorial, il codice JavaScript. Quasi tutte le chiamate che faremo provengono dall'API di Google Maps a cui abbiamo fatto riferimento in precedenza. Google fornisce un'eccellente documentazione e codice di esempio sul loro sito Web, quindi assicurati di verificarlo. Proverò a collegarmi alle pagine pertinenti mentre le uso.
La prima cosa è che mentre la nostra pagina HTML è aperta, consente di avviare la funzione di inizializzazione impostando onload attributo. Nota: questo potrebbe essere fatto in jQuery usando il $ (Document) .ready () funzione.
Ora ci trasferiremo al js / appication.js file. La prima cosa che dobbiamo fare è impostare alcune variabili. Probabilmente un certo evangelista del codice mi darà la caccia per dichiarare le variabili globali, ma credo che in questo caso dovremmo essere a posto. Ti darò il codice e poi spiegherò come utilizzeremo ciascuno di essi.
var gdir, fromAddress, toAddress;
La funzione initialize () che abbiamo chiamato in precedenza verrà utilizzata per creare la mappa sulla pagina e posizionare un indicatore personalizzato della nostra posizione.
Accentsconagua
/ * ** * Funzione Bootstrap per impostare la mappa e applicare * indicatore azienda personalizzato * / funzione initialize () if (GBrowserIsCompatible ()) // settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // end settings // setup elements map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("directions")); // gestore degli errori GEvent.addListener (gdir, "error", handleErrors); // set company marker var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // imposta il map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); La prima cosa che dobbiamo fare è controllare se il browser è compatibile con Google Maps, e per questo Google fornisce GBrowserIsCompatible () nella loro API. In sostanza, restituisce true se il browser è compatibile e ci consente di passare al resto della nostra funzione. Ho deciso di astrarre alcuni dei valori in variabili nella parte superiore della funzione in modo che questo potesse essere facilmente portato su molte applicazioni.
// settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // impostazioni finali
Il companyMarkerImage è una stringa della posizione di una piccola immagine che inseriremo nella nostra posizione sulla mappa. Questo è qualcosa che ritengo sia un bel tocco avere un'icona personalizzata per rappresentare la tua attività che personalizzerà la visualizzazione generica di Google Map. Il prossimo, companyLatLng contiene un oggetto GLatLng corrispondente a un punto di latitudine e longitudine nel mondo. Non correre fuori e acquistare un dispositivo GPS per ottenere questi numeri possiamo usare maps.google.com. Nella casella di ricerca digita il tuo indirizzo e quando trova la posizione clicca il collegamento pulsante in alto a destra della mappa. Scorri la prima casella di testo nella finestra modale e trova & Sll = ... .
È possibile copiare e incollare tali coordinate nei parametri del nostro costruttore GLatLng. Questo è il punto sulla mappa in cui posizioneremo la nostra immagine personalizzata. La prossima variabile, companyMarkerSize, contiene un oggetto GSize che rappresenta la larghezza e l'altezza dell'immagine del tuo segnalibro personalizzato. Quindi abbiamo impostato indirizzare che è l'indirizzo dell'azienda. La variabile finale, defaultZoomLevel, dice semplicemente alla mappa cosa vuoi che il livello di zoom predefinito sia compreso tra 1 e 18.
// setup elements map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("directions")); La prossima riga di codice crea un oggetto GMap2. Google lo descrive come "la classe centrale nell'API". Questo carica i dati della mappa e ci consente di manipolare ciò che è mostrato nell'area della mappa. Prende un argomento un oggetto DOM che punta all'elemento che contiene la mappa, #map_canvas. Quindi abbiamo impostato gdir per contenere l'oggetto GDirections. Questa è l'interfaccia che utilizziamo per interrogare Google Maps per le indicazioni. Il costruttore prende due argomenti un oggetto mappa e un oggetto DOM in cui vogliamo inserire le direzioni turn-by-turn. Ho scelto di creare un div vuoto qui sotto #addresses chiamato #indicazioni.
// gestore degli errori GEvent.addListener (gdir, "error", handleErrors);
Quando si utilizzano i servizi Web, si rischia sempre di ricevere un errore. Possiamo renderlo il più doloroso possibile usando la classe GEvent. In questo bit di codice stiamo dicendo che se abbiamo un errore, otteniamo le indicazioni per eseguire una funzione di callback personalizzata, handleErrors nel nostro caso. Chiamiamo direttamente la funzione addListener () che registra un callback. Prende 3 argomenti un oggetto sorgente, una stringa che si riferisce al tipo di evento su cui vogliamo eseguire il callback e un gestore che punta a una funzione che vogliamo eseguire. La funzione, handleErrors, è qualcosa che vedremo più avanti.
// set company marker var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // imposta il map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
Le ultime righe in inizializzare() sono usati per creare il nostro marker personalizzato, ho scelto un Jayhawk trovato nella homepage di KU. createMarker è una funzione wrapper che ho scritto per astrarre il codice richiesto per creare un marker personalizzato. Ci vogliono tre argomenti: un riferimento a un oggetto GLatLng in cui vogliamo posizionare l'immagine sul, una stringa che rappresenta il percorso di un'immagine e un riferimento a un oggetto GSize che rappresenta la dimensione dell'immagine. Quindi usiamo il metodo setCenter () della classe GMap2 che prende due argomenti su un oggetto GLatLng delle coordinate su cui centrare e un numero intero per il livello di zoom. Si noti che stiamo passando le variabili che abbiamo impostato nel blocco delle impostazioni nella parte superiore del inizializzare() funzione. L'ultima riga di codice usa il metodo addOverlay (). Questo è ciò che aggiunge effettivamente l'immagine personalizzata alla mappa.
Il inizializzare() la funzione fa un sacco di sollevamento, ma certamente può dimostrarlo. Dopo aver scritto il createMarker () la prossima funzione sarà in grado di caricare l'applicazione e vedere alcuni progressi. Ma prima consente di ricapitolare il inizializzare() funzione.
Successivamente creeremo una funzione wrapper che elimina tutta la sofferenza dalla creazione di un marker con un'immagine personalizzata. La ragione per cui scelgo di astrarre questo è perché è un processo implicito e ingombrerebbe il nostro inizializzare() funziona ancora di più. Un altro vantaggio è che possiamo aggiungere marcatori multipli molto velocemente senza ripetere un sacco di codice.
/ * ** * Funzione wrapper per creare / restituire un oggetto marcatore * con immagine personalizzata * / funzione createMarker (latlng, imageURL, imageSize) var marker = new GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; return new GMarker (latlng, icon: marker);
Notevolmente più piccola della nostra prima funzione, ma altrettanto importante. Per prima cosa dichiariamo una nuova variabile, marcatore, e memorizzare un oggetto GIcon. Può prendere due argomenti copia che è un oggetto GIcon da cui copierà le proprietà e un'immagine che è una stringa che rappresenta un percorso per un'immagine personalizzata. G_DEFAULT_ICON è una costante che rappresenta un indicatore predefinito e imageURL proviene dal blocco delle impostazioni in inizializzare(). Dobbiamo solo impostare un'altra proprietà, iconSize che è di tipo GSize, rappresenta la dimensione della nostra immagine personalizzata e proviene anche dal blocco delle impostazioni. La riga finale del codice restituisce un oggetto GMarker che accetta due argomenti latlng e icona. Il primo, latlng è un riferimento all'oggetto GLatLng che abbiamo dichiarato nel blocco delle impostazioni. L'argomento successivo riguarda l'oggetto GIcon che abbiamo appena creato. Questo è tutto ciò che dobbiamo fare per far funzionare la porzione di mappa della nostra applicazione. Ora puoi caricare la pagina e vedere come è facile ottenere una bella mappa sul nostro sito web.
Questa è di gran lunga la mia parte preferita su questo tutorial, che consente agli utenti di inserire un indirizzo e ricevere indietro una mappa con il percorso evidenziato e le indicazioni turn-by-turn. Attraverso l'uso di questa API possiamo condensare qualcosa che richiederebbe migliaia di righe di codice e un'incredibile quantità di risorse di elaborazione solo per una manciata di codice.
/ * ** * Cerca le direzioni, gli overlay sulla mappa, * e stampa turn-by-turn su #directions. * / function overlayDirections () fromAddress = document.getElementById ("street"). value + "" + document.getElementById ("city"). value + "" + document.getElementById ("state"). options [documento. getElementById ("stato"). selectedIndex] .value + "" + document.getElementById ("zip"). value; gdir.load ("from:" + fromAddress + "a:" + toAddress); La prima linea che ho effettivamente esteso in cinque righe per chiarezza. In pratica questo prende tutti i valori dalla forma e mette uno spazio tra ogni parte. Ho pensato che fosse meglio che chiedere all'utente di inserire l'intero indirizzo in una singola casella di testo, perché ciò può creare confusione.
La seconda linea usa il gdir siamo entrati inizializzare(). Chiamiamo il metodo load () e passiamo un argomento a stringa singola, che è essenzialmente quello che passeremmo maps.google.com tramite la casella di ricerca. Il a partire dal: e a: le parole chiave aiutano a comunicare a Google quale indirizzo deve essere il punto di partenza e quale deve essere il punto finale. Questo è tutto ciò che dobbiamo fare per le direzioni, si anch'io sono rimasto scioccato! Se visiti di nuovo la tua pagina, puoi vederla in azione.
Quindi dichiareremo il handleErrors () funzione. L'ho preso dal codice di esempio di Google sul loro sito web API. Non entrerò nei dettagli perché è abbastanza semplice.
function handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alert ("Non è stato possibile trovare alcuna località geografica corrispondente per uno degli indirizzi specificati. Ciò potrebbe essere dovuto al fatto che l'indirizzo è relativamente nuovo o potrebbe non essere corretto. \ nErrore: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_SERVER_ERROR) alert ("Non è stato possibile elaborare correttamente una richiesta di geocodifica o indicazioni stradali, tuttavia il motivo esatto per l'errore non è noto. \ n Codice errore:" + gdir.getStatus ( ).codice); else if (gdir.getStatus (). code == G_GEO_MISSING_QUERY) alert ("Il parametro HTTP q mancava o non aveva valore. Per le richieste di geocoder, ciò significa che è stato specificato un indirizzo vuoto come input. nell'input non è stata specificata alcuna query. \ n Codice di errore: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("La chiave data non è valida o non corrisponde al dominio per cui è stata assegnata. \ n Codice di errore:" + gdir.getStatus (). code) ; else if (gdir.getStatus (). code == G_GEO_BAD_REQUEST) alert ("Non è stato possibile analizzare correttamente una richiesta di indicazioni stradali. \ n Codice di errore:" + gdir.getStatus (). code); altro avviso ("Si è verificato un errore sconosciuto"); Ha una lunga se ... elseif ... altra istruzione che controlla molti tipi di errore e avvisa l'utente in caso si verifichi. È possibile modificare questo se si desidera rendere l'avviso meno tecnico.
Come buoni sviluppatori web dovremmo assicurarci che il nostro sito web funzioni per il maggior numero possibile di utenti, compresi quelli con JavaScript disabilitato. In questa situazione ho scelto di reindirizzare quelli con JS disabilitato su Google Maps con la ricerca eseguita in modo da ottenere comunque indicazioni stradali. Questo viene fatto usando PHP per valutare il modulo e reindirizzare a Google Maps. Nella parte superiore della pagina HTML inserisci questo codice:
...
Per prima cosa abbiamo di nuovo un blocco delle impostazioni che ha solo una variabile da impostare, $ TO. Questo è simile a ciò che abbiamo fatto in JavaScript per indirizzare, ma abbiamo bisogno della stessa stringa anche in PHP. Poi abbiamo una dichiarazione if per verificare i dati POSTed, il che significa che il nostro modulo è stato inviato. Ora prendiamo i valori del modulo e li inseriamo in una stringa con spazi e lo memorizziamo in una variabile, $ DA. Quindi memorizziamo il valore della lingua su $ LOC, più su questo più tardi. Il $ url variabile terrà la stringa che rappresenta l'URL della query su Google. Nota che url-encode i nostri valori in modo che possano viaggiare in sicurezza sul reindirizzamento. L'ultima riga di codice utilizza intestazioni PHP per reindirizzare l'utente a Google.
Come azienda, vuoi raggiungere il maggior numero di persone possibile e parte di quel processo supporta più lingue. In Google Maps il supporto per altre lingue non comporta alcun costo aggiuntivo per noi.
Per prima cosa apri la tua pagina HTML e inserisci il seguente codice tra i tag del modulo.
... ...
Ovviamente se si desidera rimuovere qualsiasi lingua è sufficiente eliminare il tag dell'opzione per questo, è anche possibile modificare l'impostazione predefinita spostando l'attributo selezionato.
Trasferirsi a js / application.js, dobbiamo fare solo due cambiamenti. A partire dal overlayDirections () funzione dopo aver creato la stringa FromAddress aggiungilo per prendere il valore selezionato dalla casella di selezione della lingua e salvalo nella nostra variabile di lingua.
... var language = document.getElementById ("language"). Options [document.getElementById ("language"). SelectedIndex] .value; ... Quindi, aggiungere un argomento al gdir.load () funzione, questo richiede un set di opzioni. Nel nostro caso dobbiamo solo dichiarare località quindi conosce la lingua e le unità corrette per le indicazioni stradali passo-passo.
... gdir.load ("from:" + fromAddress + "a:" + toAddress, "locale": lingua); ... Nota: Abbiamo già incluso questo nel reindirizzamento PHP e se si desidera disabilitare questa funzione solo in modo statico $ LOC.
... $ LOC = 'en' ...
Questo è tutto ciò di cui abbiamo bisogno per questa fantastica funzione e spero che tu abbia imparato un po 'su Google Maps lungo la strada. Vi sfido come sviluppatori a continuare a trovare modi interessanti per integrare le mappe nelle vostre applicazioni. Ogni volta che un modello è a conoscenza della posizione, dovresti chiedere se il tuo progetto ha un uso per la rappresentazione visiva su una mappa. Grazie per aver letto; come sempre, sono qui per aiutare nei commenti o su Twitter (@noahhendrix).
