Share
Questo tutorial è un aggiornamento di uno precedente in cui abbiamo visto come mostrare le istruzioni di guida direttamente su un sito web WordPress utilizzando l'API di Google Maps.
Nel primo tutorial, i nostri utenti dovevano inserire manualmente il loro indirizzo in un modulo sul sito Web, quindi le indicazioni sarebbero state visualizzate. Questo è stato un buon esempio di come utilizzare l'API di Google Maps ma la possibilità di rilevare la presenza di un utente posizione attuale, oltre a poter inserire manualmente un indirizzo, era spesso richiesta una funzionalità.
C'è molto terreno da trattare qui, ma una buona parte di esso è stata trattata nel tutorial precedente. Per evitare di dovermi ripetere, consulta il primo tutorial "Dai ai tuoi clienti le indicazioni stradali" dove troverai tutto ciò che non è spiegato in questo.
Questa è una lista di cose che siamo non andando a coprire in questo tutorial. Quindi sentiti libero di rivedere il tutorial originale per spiegazioni dettagliate:
Nota: Leggere il primo tutorial ti aiuterà a capire le parti che non sono spiegate in questo tutorial. Tuttavia, il codice fornito nel fonte i file contengono tutto ciò di cui hai bisogno.
Oltre a ciò che abbiamo ottenuto nel precedente tutorial, avremo anche:
Altri miglioramenti all'originale:
Aggiungeremo un minuscolo un po 'di CSS per migliorare il look / layout della nostra mappa e pulsanti, quindi creeremo un foglio di stile CSS esterno nel nostro carta geografica elenco.
Dentro la tua cartella dei temi, la tua carta geografica la directory dovrebbe ora assomigliare a questa:
Nel primo tutorial, abbiamo aggiunto un paio di righe di CSS nel foglio di stile principale del tema, style.css. Prendi queste linee e inseriscile in questo nuovo file CSS insieme a tutto ciò che vedi qui sotto.
Nota: Questi stili sono stati scritti per lavorare con il tema del titolo Twenty Eleven. Potresti scoprire che padding, margini o colori potrebbero non adattarsi perfettamente al tuo tema. Pertanto, dovresti sentirti libero di adattare tutto ciò - non influenzerà la funzionalità :)
# map-container img larghezza massima: nessuna; / * Da tut originale * / # map-container width: 100%; altezza: 400 px; / * Dall'originale tut * / / * riduce l'altezza della mappa su schermi più piccoli * / @media solo schermo e (larghezza massima: 767px) # map-container height: 235px; / * Una classe che useremo per nascondere alcuni elementi in seguito * /. Hidden display: none; / * Stili dei pulsanti: modifica a piacere! * / .map-button display: block; imbottitura: 5px; sfondo: # d9edf7; border: 1px solid # bce8f1; colore: # 3a87ad; margine: 5px 0; border-radius: 3px; text-shadow: 1px 1px 1px bianco; .map-button: hover, .map-button: focus background: # b1dce5; decorazione del testo: nessuna; / * Elimina qualsiasi riempimento predefinito sugli elementi 'p' * / #directions p margin-bottom: 0; / * Regola il modo in cui l'elemento di input visualizza * / # from-input margin: 5px 0; border-radius: 3px; imbottitura: 5px;
Ora puoi andare avanti e accodare il file all'interno del wpmap_map codice corto.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style'); Ora aggiungiamo il markup per i pulsanti nel nostro wpmap_directions_input codice corto.
div e applicare l''nascosto'classe che abbiamo definito nel nostro CSS. Quindi possiamo rimuovere questa classe in un secondo momento se la posizione geografica è abilitata.WPmap.getDirections metodo ('Manuale' o 'geo') - questo ci permette di avere la funzionalità originale (dove un utente inserisce manualmente un indirizzo) insieme al nuovo metodo di geolocalizzazione.campata tag è dove inseriremo il link speciale che aprirà l'applicazione Mappa su cellulari e tablet. C'è un po 'di lavoro nella costruzione del link correttamente, quindi daremo un'occhiata più da vicino che più avanti nella sezione JavaScript di questo tutorial. function wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Per indicazioni stradali, inserisci il tuo indirizzo di seguito:
Ottieni indicazioni stradali
In alternativa, puoi
Usa la tua posizione attuale '; restituire $ output; Finora, in relazione al tutorial originale, abbiamo:
Successivamente, daremo un'occhiata alle modifiche JavaScript. C'è molto da fare nella prossima sezione, quindi, invece di fare un confronto diretto con l'originale, farò del mio meglio per spiegare cosa sta succedendo in ogni metodo / funzione e puoi rivedere i file sorgente completi alla fine per vedere come tutto si combina.
Adesso arriva la parte divertente. Nel primo tutorial, il nostro dentro() il metodo è stato responsabile per l'istanziazione della mappa nello stesso formato per ogni caricamento della pagina. Ciò significava che tutti avrebbero ricevuto la stessa identica funzionalità indipendentemente dalle funzionalità del dispositivo: è il momento di cambiarlo!
Ad esempio, quando un utente visita il nostro sito Web utilizzando uno smartphone, vogliamo essere in grado di offrire loro la possibilità di utilizzare la posizione corrente invece di inserirla manualmente. Inoltre, vogliamo la possibilità di avviare l'applicazione Maps nativa sul telefono e avere pianificato automaticamente il percorso.
L'API JavaScript di GeoLocation è una delle più supportate tra tutte le cosiddette nuove funzionalità HTML5. Più del 75% di tutti i browser sembra supportarlo in base a caniuse.com. Penso che questo significhi che siamo abbastanza sicuri! (Forniremo comunque un back-back per i browser più vecchi :))
Ora, scaviamo nel JavaScript.
In parole povere, tutto ciò che stiamo cercando di fare qui è fornire l'opzione per utilizzare la posizione geografica se è disponibile. In caso contrario, gli utenti saranno comunque in grado di inserire un indirizzo manualmente.
Se dai un'occhiata al flusso di controllo semplificato (sotto), puoi vedere che usiamo gli stessi metodi per impostare la mappa, ma un altro paio se la posizione geografica è abilitata.
OK, penso che abbiamo una buona comprensione di ciò che stiamo cercando di realizzare qui, quindi ora fornirò una spiegazione di ciascun metodo individualmente - come sempre, fai riferimento ai file sorgente per vedere come tutto si combina nello stesso file.
Qui interrogiamo il DOM per recuperare alcune proprietà che useremo in seguito. Riceviamo anche un paio di oggetti dall'API che gestiranno la richiesta 'ottieni indicazioni stradali'.
var WPmap = // Elementi HTML che useremo in seguito! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), geoDirections: document.getElementById (' geo-directions '), nativeLinkElem: document.getElementById (' native-link '), startLatLng: null, destination: null , geoLocation: null, geoLat: null, geoLon: null, // Oggetti dell'API di Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / ** Oggetto WPmap continua durante il tutorial ** / dentro()Questo è il primo metodo che verrà chiamato quando verrà caricata la nostra pagina.
dentro() metodo è il gestore di eventi che usiamo per visualizzare un messaggio all'utente quando vengono richieste le indicazioni. Nota: Questo è opzionale - sentiti libero di rimuoverlo.init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // Cose da fare se il browser supporta GeoLocation. WPmap.getGeoCoords (); WPmap.getDestination (); // ascolta per quando vengono richieste le indicazioni stradali google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // chiudi la prima informazioneWindow marker.setVisible (false); // rimuovi il primo marcatore // imposta le stringhe da utilizzare var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // imposta il contenuto di infoWindow prima di riaprirlo. infoWindow. setContent ( 'Grazie!
Sembra che tu stia parlando '+ distanceString +' lontano da noi.
Le indicazioni sono appena sotto la mappa '); // riapri il infoWindow infoWindow.open (WPmap.map, marker); setTimeout (function () infoWindow.close (), 8000); // chiudi dopo 8 secondi. ); //dentro
Ok, ho mostrato il dentro() prima questo metodo in modo che tu possa capire come funzionerà il flusso di controllo.
Ora ti mostrerò i metodi coinvolti quando un utente ha geo localizzazione.
getGeo ()Tutto inizia con il 'rilevamento delle caratteristiche' standard.
Per determinare se un browser supporta GeoLocation o no, tutto ciò che facciamo è controllare l'esistenza di navigator.geolocation oggetto.
getGeo: function () if (!! navigator.geolocation) return navigator.geolocation; altrimenti restituisce undefined; ,
getGeoCoords ()Ora che sappiamo che il browser ha la posizione geografica, possiamo andare avanti e richiedere le attuali coordinate.
getCurrentPosition () e passare due parametri: una funzione di callback riuscita e una funzione di callback di erroregetGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Questo è il nostro callback di successo. Se arriviamo così lontano, abbiamo recuperato con successo le coordinate dell'utente.
posizione sarà un oggetto contenente le informazioni sulla posizione geografica in modo da poter andare avanti e impostare i valori Lat / Lon sulle proprietà dell'oggetto.showGeoButton () per mostrare il pulsante per l'utilizzo della posizione corrente.setNativeMapLink () per costruire il collegamento che aprirà le applicazioni di mappe native.setGeoCoords: function (position) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Questo gestirà eventuali errori ricevuti da getCurrentPosition () - questo è molto utile in fase di sviluppo, ma in fase di produzione si consiglia di rimuoverlo dato che comunque stiamo fornendo un ripiego alla voce di indirizzo manuale.
geoError: function (error) var message = ""; // Verifica errori noti switch (error.code) case error.PERMISSION_DENIED: message = "Questo sito Web non dispone dell'autorizzazione per utilizzare l'API di localizzazione geografica"; rompere; caso error.POSITION_UNAVAILABLE: message = "Spiacenti, la tua posizione attuale non può essere determinata, inserisci invece il tuo indirizzo."; rompere; caso error.PERMISSION_DENIED_TIMEOUT: message = "Spiacenti, stiamo riscontrando problemi nel tentativo di determinare la tua posizione corrente, inserisci invece il tuo indirizzo."; rompere; if (message == "") var strErrorCode = error.code.toString (); message = "La posizione non può essere determinata a causa di un errore sconosciuto (Codice:" + strErrorCode + ")."; console.log (messaggio); ,
showGeoButtonMostra il pulsante 'ottieni la posizione corrente'.
.nascosto classe usando .removeClass (). Questo è un metodo di supporto che semplifica la rimozione di classi su elementi HTML (sarà nella parte inferiore dei file di origine) showGeoButton: function () var geoContainer = document.getElementById ('geo-directions'); geoContainer.removeClass ( 'nascosto'); , setNativeMapLink ()Questo è il link speciale che aprirà le applicazioni native della mappa su dispositivi iOS e Android. Poiché in precedenza abbiamo salvato i valori Lat / Lon correnti sul nostro oggetto, ora possiamo generare facilmente il collegamento con il formato corretto.
setNativeMapLink: function () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Apri in Google Maps'); , getDestination ()Qui stiamo determinando se l'amministratore ha inserito un valore Lat / Lon o un indirizzo regolare nella pagina Opzioni:
immettere è un valore Lat / Lon utilizzando un'espressione regolare.WPmap.destination uguale a a google.maps.LatLng oggetto.google.maps.Geocoder () convertire l'indirizzo in a google.maps.LatLng oggetto e impostalo come destinazione.setupMap () getDestination: function () var toInput = WPmap.toInput.value; var isLatLon = (/^(\-?\d+(\.++)?),\s*(\-?\d+(\.++)?)$/.test(toInput)); if (isLatLon) var n = WPmap.toInput.value.split (","); WPmap.destination = new google.maps.LatLng (n [0], n [1]); WPmap.setupMap (); else geocoder = new google.maps.Geocoder (); geocoder.geocode ('address': WPmap.toInput.value, function (results, status) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Molto simile all'originale - imposta la mappa con l'indicatore centrato sulla nostra destinazione e il testo dalle opzioni di amministrazione all'interno della finestra delle informazioni.
/ * Inizializza la mappa * / setupMap: function () // ottiene il contenuto var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // assicurati che arrivi come centro Integer: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); marker = new google.maps.Marker (map: WPmap.map, position: WPmap.destination, draggable: false); // imposta il contenuto infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); , ottenere direzioni()Questo viene chiamato ogni volta che vengono richieste indicazioni. La sua unica argomentazione 'richiesta', ci aiuterà a determinare se l'utente ha fatto clic sul pulsante per utilizzare un indirizzo inserito manualmente o l'indirizzo' posizione corrente '.
getDirections: function (request) // Ottieni il codice postale inserito var daStr = WPmap.fromInput.value; var dirRequest = origine: fromStr, destinazione: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // controlla se l'utente ha fatto clic su "usa posizione corrente" se (richiesta == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Invariato dall'originale: gestisce l'inserimento delle indicazioni nella pagina.
/ ** * Mostra le indicazioni stradali nella pagina. * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alert ('Spiacente, non possiamo fornire indicazioni per quell'indirizzo (forse sei troppo lontano, sei nello stesso paese di noi?) Per favore riprova. '); rompere; caso "NOT_FOUND": avviso ('Spiacente, non abbiamo capito l'indirizzo inserito - Per favore riprova.'); rompere; impostazione predefinita: avviso ('Spiacente, si è verificato un problema nella generazione delle indicazioni. Riprovare.') return; // Mostra indicazioni WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , Al di fuori dell'oggetto, c'è solo il listener di eventi da aggiungere che caricherà la mappa quando la pagina è pronta e la funzione di supporto di cui abbiamo parlato in precedenza.
/ * Carica la mappa quando la pagina è pronta * / google.maps.event.addDomListener (finestra, 'carica', WPmap.init); / * Funzione per rimuovere facilmente qualsiasi classe da un elemento. * / HTMLElement.prototype.removeClass = function (remove) var newClassName = ""; var i; var classes = this.className.split (""); per (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Ora per ottenere tutto ciò che funziona devi solo mettere il carta geografica cartella nel tema e quindi scorrere le cose che abbiamo trattato nel primo tutorial.
Includere map.php nel tuo tema functions.php
/ ** In functions.php ** / include ('map / map.php'); [Wpmap_map][Wpmap_directions_input][Wpmap_directions_container]Come ho già detto questo è un aggiornare a questo tutorial e quindi è davvero necessario rivedere entrambi per comprendere appieno l'intero processo. Forse il modo più semplice per capire come si combini tutto sarebbe quello di visualizzare i file sorgente forniti però.
Dopotutto, dovresti avere una piccola applicazione cartacea molto carina che risponderà a diverse dimensioni dello schermo e aggiungerà funzionalità aggiuntive agli utenti con browser moderni. Per tutto il tempo fornisce un buon ripiego a tutti gli altri.
