Share
Denne opplæringen er en oppdatering til en tidligere, hvor vi så på hvordan du viser kjørinstruksjoner direkte på et WordPress-nettsted ved hjelp av Google Maps API.
I den første opplæringen måtte brukerne manuelt skrive inn adressen til et skjema på nettsiden - så vil instruksjonene vises. Dette var et godt eksempel på hvordan du bruker Google Maps API, men muligheten til å oppdage en brukers " nåværende plassering, i tillegg til å kunne skrive inn en adresse manuelt, ble en funksjon ofte forespurt.
Det er ganske mye grunnlag for å dekke her, men en stor del av den var dekket i den forrige opplæringen. For å redde meg må du gjenta meg selv, vennligst gå gjennom første veiledning "Gi kundes kjørebeskrivelser" der du finner alt som ikke er forklart i denne.
Dette er en liste over ting vi er ikke kommer til å dekke i denne opplæringen. Så vær så snill å se gjennom den opprinnelige opplæringen for detaljerte forklaringer:
Merk: Å lese den første opplæringen vil hjelpe deg med å forstå delene som ikke er forklart i denne opplæringen. Men koden som er oppgitt i kilde filer inneholder alt du trenger.
I tillegg til det vi oppnådde i den forrige opplæringen, vil vi også:
Andre forbedringer av originalen:
Vi legger til en liten litt av CSS for å forbedre utseendet / utformingen av kartet og knappene, så vi lager et eksternt CSS-stilark i vår kart katalog.
Inne i temamappen din kart katalogen skal nå se slik ut:
I den første opplæringen lagde vi et par linjer med CSS inn i temaets hoved stilark, style.css. Ta tak i disse linjene og sett dem inn i denne nye CSS-filen sammen med alt du ser nedenfor.
Merk: Disse stilene ble skrevet for å arbeide med aksjelaget Twenty Eleven tema. Det kan hende du finner at polstring, marginer eller farger kanskje ikke passer perfekt til ditt tema. Derfor bør du gjerne justere noe av dette - det vil ikke påvirke funksjonaliteten :)
# kart-container img maksimal bredde: ingen; / * Fra original tut * / # map-container bredde: 100%; høyde: 400px; / * Fra original tut * / / * redusere høyden på kartet på mindre skjermer * / @media bare skjerm og (maks bredde: 767px) # map-container høyde: 235px; / * En klasse vi skal bruke til å skjule noen elementer senere * / .hidden display: none; / * Knappstiler - rediger etter ønske! * / .map-button display: block; polstring: 5px; bakgrunn: # d9edf7; grense: 1px solid # bce8f1; farge: # 3a87ad; margin: 5px 0; border-radius: 3px; tekstskygge: 1px 1px 1px hvit; .map-knapp: svever, .map-knapp: fokus bakgrunn: # b1dce5; tekst-dekorasjon: ingen; / * Avbryt eventuelle standardpolstring på 'p' -elementer * / #directions p margin-bottom: 0; / * Juster hvordan inngangselementet viser * / # fra-inngang margin: 5px 0; border-radius: 3px; polstring: 5px;
Nå kan du gå videre og enqueue filen inne i wpmap_map kort kode.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style'); La oss nå legge til merket for knappene i vår wpmap_directions_input kort kode.
div og bruk 'skjult'klasse som vi definerte i vårt CSS. Da kan vi fjerne denne klassen senere hvis geo-plassering er aktivert.WPmap.getDirections metode ('Håndbok'eller'geo') - dette tillater oss å ha den opprinnelige funksjonaliteten (hvor en bruker skriver inn en adresse manuelt) sammen med den nye geografiske plasseringsmetoden.span tag er hvor vi setter inn den spesielle lenken som åpner kartapplikasjonen på mobiler og nettbrett. Det er litt arbeid involvert i å bygge linken riktig, så vi tar en nærmere titt på det senere i JavaScript-delen av denne opplæringen. funksjon wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' For veibeskrivelser, skriv inn adressen nedenfor:
Få veibeskrivelser
Alternativt kan du
Bruk din nåværende posisjon '; returnere $ output; Så langt, i forhold til den opprinnelige opplæringen, har vi:
Deretter tar vi en titt på JavaScript-modifikasjonene. Det er ganske mye til dette neste avsnittet, så i stedet for å gjøre en direkte sammenligning med originalen, vil jeg bare gjøre mitt beste for å forklare hva som skjer i hver metode / funksjon, og du kan se gjennom de fullstendige filene på slutten for å se hvordan passer alt sammen.
Nå kommer den morsomme delen. I den første opplæringen, vår i det() Metoden var ansvarlig for å instantiere kartet i samme format for hver sidebelastning. Dette betydde at alle ville få nøyaktig samme funksjonalitet, uansett enhetskapasiteter - det er på tide å endre det!
Når en bruker besøker nettstedet vårt ved hjelp av en smarttelefon, vil vi for eksempel kunne tilby dem muligheten til å bruke sin nåværende plassering i stedet for å skrive inn den manuelt. Vi ønsker også muligheten til å lansere det innfødte kartprogrammet på telefonen og få ruten automatisk planlagt.
GeoLocation JavaScript API er en av de mest godt støttede av alle de såkalte HTML5 nye funksjonene. Over 75% av alle nettlesere synes å støtte det i henhold til caniuse.com. Jeg tror det betyr at vi er ganske trygge! (Vi gir altså en tilbakebetaling for eldre nettlesere uansett :))
La oss nå grave inn i JavaScript.
Enkelt sagt, alt vi ønsker å gjøre her er å gi muligheten til å bruke geo-plassering hvis den er tilgjengelig. Hvis ikke, kan brukerne fortsatt angi en adresse manuelt.
Hvis du ser på den forenklede kontrollstrømmen (under), kan du se at vi bruker de samme metodene for å sette opp kartet, men et par flere hvis geografisk posisjon er aktivert.
OK, jeg tror vi har en god forståelse av hva vi prøver å oppnå her, så nå skal jeg gi en forklaring på hver metode individuelt - som alltid, se kildefilene for å se hvordan alt passer sammen i samme fil.
Her spør vi DOM for å hente noen egenskaper som vi vil bruke senere. Vi får også et par objekter fra API-en som håndterer forespørselen 'få veibeskrivelse'.
var WPmap = // HTML Elements vi vil bruke senere! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tilInput: document.getElementById ('map-config-adresse'), fraInput: document.getElementById input'), unitInput: document.getElementById ('unit-input'), geoDirections: document.getElementById ('geo-retninger'), nativeLinkElem: document.getElementById ('native-link'), startLatLng: null, destinasjon: null , geoLocation: null, geoLat: null, geoLon: null, // Google Maps API-objekter dirService: ny google.maps.DirectionsService (), dirRenderer: ny google.maps.DirectionsRenderer (), kart: null, / ** WPmap Object fortsetter gjennom hele opplæringen ** / i det()Dette er den første metoden som skal ringes når siden vår er lastet inn.
i det() Metode er hendelseshåndterer som vi bruker til å vise en melding til brukeren når retninger blir forespurt. Merk: Dette er valgfritt - vær så snill å fjerne det.init: funksjon () if (WPmap.geoLoc = WPmap.getGeo ()) // ting å gjøre hvis nettleseren støtter GeoLocation. WPmap.getGeoCoords (); WPmap.getDestination (); // lytt etter når Veibeskrivelse er forespurt google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funksjon () infoWindow.close (); // lukk den første infoWindow marker.setVisible (false); // fjern den første markøren // oppsettstrenger som skal brukes. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // angi innholdet i infoWindow før vi åpner det igjen. infoWindow. setContent ( 'Takk!
Det ser ut til at du er om '+ avstandString +' vekk fra oss.
Veibeskrivelsen er rett under kartet '); // åpne infoWindow infoWindow.open (WPmap.map, markør); setTimeout (funksjon () infoWindow.close (), 8000); // lukk den etter 8 sekunder. ); //i det
Ok, jeg har vist i det() metode først denne gangen slik at du kan forstå hvordan kontrollflowen vil fungere.
Nå vil jeg vise deg metodene som er involvert når en bruker har geografisk plassering.
getGeo ()Alt begynner med standard 'funksjon deteksjon'.
For å avgjøre om en nettleser støtter GeoLocation eller ikke, er alt vi gjør, sjekke eksistensen av navigator.geolocation gjenstand.
getGeo: funksjon () hvis (!! navigator.geolocation) returnere navigator.geolocation; ellers returnere udefinert; ,
getGeoCoords ()Nå som vi vet at nettleseren har geografisk plassering, kan vi gå videre og be om de nåværende koordinatene.
getCurrentPosition () og passere to parametre - en tilbakekallingsfunksjon og en tilbakekallingsfunksjongetGeoCoords: funksjon () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Dette er vår suksess tilbakeringing. Hvis vi kommer så langt, har vi hentet koordinatene til brukeren.
stilling vil være et objekt som inneholder geografisk plasseringsinformasjon, slik at vi kan fortsette og sette Lat / Lon-verdiene til objektegenskaper.showGeoButton () for å vise knappen for bruk av gjeldende plassering.setNativeMapLink () å konstruere lenken som vil åpne opp opprinnelige kartapplikasjoner.setGeoCoords: funksjon (posisjon) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Dette vil håndtere eventuelle feil mottatt fra getCurrentPosition () - Dette er veldig nyttig i utviklingen, men i produksjon kan det hende du vil fjerne det da vi gir en tilbakebetaling til den manuelle adresseposten uansett.
geoError: funksjon (feil) var message = ""; // Sjekk etter kjent feilbryter (error.code) case error.PERMISSION_DENIED: message = "Dette nettstedet har ikke tillatelse til å bruke Geo-lokaliserings-API'en"; gå i stykker; case error.POSITION_UNAVAILABLE: message = "Beklager, din nåværende stilling kan ikke bestemmes, vennligst skriv inn adressen din istedenfor."; gå i stykker; case error.PERMISSION_DENIED_TIMEOUT: message = "Beklager, vi har problemer med å prøve å bestemme din nåværende posisjon, vennligst skriv inn adressen din i stedet."; gå i stykker; hvis (melding == "") var strErrorCode = error.code.toString (); message = "Posisjonen kunne ikke bestemmes på grunn av en ukjent feil (Kode:" + strErrorCode + ")."; console.log (melding); ,
showGeoButtonVis knappen 'få nåværende plassering'.
.skjult klassen bruker .removeClass (). Dette er en hjelpemetode som gjør at du fjerner klasser på HTML-elementer mye enklere (det vil være nederst i kildefilene) showGeoButton: funksjon () var geoContainer = document.getElementById ('geo-retninger'); geoContainer.removeClass ( 'skjulte'); , setNativeMapLink ()Dette er den spesielle lenken som vil åpne opp opprinnelig kartprogrammer på iOS- og Android-enheter. Fordi vi tidligere lagret dagens Lat / Lon-verdier til vårt objekt, kan vi nå enkelt generere linken med riktig format.
setNativeMapLink: funksjon () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destinasjon = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Åpne i Google Maps'); , getDestination ()Her bestemmer vi om administrasjonen har angitt en Lat / Lon-verdi eller en vanlig adresse på Alternativer-siden:
toInput er en Lat / Lon-verdi ved å bruke et regulært uttrykk.WPmap.destination lik a google.maps.LatLng gjenstand.google.maps.Geocoder () å konvertere adressen til en google.maps.LatLng objekt og sett det som destinasjon.setupMap () getDestination: function () var toInput = WPmap.toInput.value; var isLatLon = (/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(toInput)); hvis (isLatLon) var n = WPmap.toInput.value.split (","); WPmap.destination = nye google.maps.LatLng (n [0], n [1]); WPmap.setupMap (); annet geocoder = nytt google.maps.Geocoder (); geocoder.geocode ('adresse': WPmap.toInput.value, funksjon (resultater, status) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Svært lik originalet - oppsett kartet med markøren sentrert på bestemmelsesstedet og teksten fra admin-alternativene i infoWindow.
/ * Initialiser kartet * / setupMap: funksjon () // få innholdet var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.map = nytt google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), // sørg for at det kommer gjennom som et integersenter: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); markør = nytt google.maps.Marker (map: WPmap.map, posisjon: WPmap.destination, draggable: false); // angi infowindow innhold infoWindow = nytt google.maps.InfoWindow (innhold: infoWindowContent); infoWindow.open (WPmap.map, markør); , Få veibeskrivelse()Dette kalles når anvisninger blir forespurt. Dens eneste argument, 'be om', vil hjelpe oss med å avgjøre om brukeren klikket på knappen for å bruke en manuelt oppgitt adresse eller' nåværende sted 'en.
getDirections: funksjon (forespørsel) // Få postnummeret som ble skrevet var fromStr = WPmap.fromInput.value; var dirRequest = opprinnelse: fromStr, destinasjon: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // sjekk om brukeren klikket 'bruk nåværende sted' hvis (request == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Uendret fra originalen - den håndterer innføringen av retningene i siden.
/ ** * Utfør instruksjonene på siden. * / showDirections: funksjon (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) tilfelle "ZERO_RESULTS": varsel ('Beklager, vi kan ikke gi veibeskrivelse til adressen (du er kanskje for langt unna, er du i samme land som oss?) Vennligst prøv igjen. '); gå i stykker; saken "NOT_FOUND": varsel ('Beklager, vi forstod ikke adressen du skrev inn - Prøv igjen.'); gå i stykker; standard: varsel ('Beklager, det oppsto et problem med å generere instruksjonene. Vennligst prøv igjen.') returnere; // Vis veibeskrivelse WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , Utenfor objektet er det bare hendelseslytteren å legge til som vil laste kartet når siden er klar og hjelperfunksjonen vi snakket om tidligere.
/ * Legg inn kartet når siden er klar * / google.maps.event.addDomListener (vindu, 'last', WPmap.init); / * Funksjon for å enkelt fjerne enhver klasse fra et element. * / HTMLElement.prototype.removeClass = funksjon (fjern) var newClassName = ""; var jeg; var klasser = this.className.split (""); for (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Nå for å få alt som fungerer, trenger du bare å sette kart mappe inn i temaet ditt og deretter løpe gjennom tingene vi dekket i første veiledning.
Inkludere map.php i temaet ditt functions.php
/ ** I functions.php ** / include ('map / map.php'); [Wpmap_map][Wpmap_directions_input][Wpmap_directions_container]Som jeg har nevnt er dette en Oppdater til denne opplæringen og derfor må du virkelig se gjennom dem begge for å forstå hele prosessen fullt ut. Muligens er den enkleste måten å forstå hvordan alt passer sammen, å vise kildefilene som er gitt.
Etter alt dette bør du ha en ganske fin liten kart applikasjon som vil svare på forskjellige skjermstørrelser og også legge til ekstra funksjonalitet for brukere med moderne nettlesere. Hele tiden gir en god tilbakebetaling for alle andre.
