Share
Acest tutorial este o actualizare a unei versiuni anterioare, în care am analizat cum să afișăm instrucțiunile de conducere direct pe un site web WordPress folosind API-ul Google Maps.
În primul tutorial, utilizatorii noștri au trebuit să introducă manual adresa lor într-un formular pe site-ul - atunci direcțiile ar fi afișate. Acesta a fost un bun exemplu de utilizare a API-ului Google Maps, dar abilitatea de a detecta utilizatorii, locatia curenta, în plus față de posibilitatea de a introduce o adresă manual, a fost o caracteristică adesea solicitată.
Există o mulțime de teren pentru a acoperi aici, dar o mare parte din ea a fost acoperită în tutorialul anterior. Pentru a mă salva de a mă repeta, vă rugăm să revizuiți primul tutorial "Dă-i-i pe clienți direcții de conducere" unde vei găsi tot ce nu este explicat în acest.
Aceasta este o listă a lucrurilor pe care suntem nu mergând la acest tutorial. Deci, nu ezitați să revizuiți tutorialul original pentru explicații detaliate:
Notă: Citirea primului tutorial vă va ajuta să înțelegeți părțile care nu sunt explicate în acest tutorial. Cu toate acestea, codul furnizat în sursă fișierele conțin tot ce aveți nevoie.
În plus față de ceea ce am realizat în tutorialul anterior, vom urmări:
Alte îmbunătățiri față de original:
Vom adăuga o minuscul bit de CSS pentru a îmbunătăți aspectul / aspectul hărții și butoanelor noastre, așa că vom crea o foaie de stiluri externe CSS în Hartă director.
În interiorul dosarului tematic, dvs. Hartă directorul ar trebui să arate astfel:
În primul tutorial, am adăugat câteva linii de CSS în foaia de stil principală a temei, style.css. Luați aceste linii și introduceți-le în acest nou fișier CSS împreună cu tot ce vedeți mai jos.
Notă: Aceste stiluri au fost scrise pentru a lucra cu tema stocului Twenty Eleven. S-ar putea să observați că umplutura, marginile sau culorile nu se potrivesc perfect temei. Prin urmare, ar trebui să vă simțiți liber să ajustați oricare dintre acestea - nu va afecta funcționalitatea :)
# hartă-container img max-width: none; / * Din originalul tut * / # map-container width: 100%; înălțime: 400px; / * De la originalul tut * / / * reduceți înălțimea hărții pe ecrane mai mici * / numai în ecranul @media și (max-width: 767px) # map-container height: 235px; / * O clasă pe care o vom folosi pentru a ascunde unele elemente mai târziu * / .hidden display: none; / * Stiluri de butoane - editați la voință! * / .map-button display: bloc; padding: 5px; fundal: # d9edf7; frontieră: 1px solid # bce8f1; culoare: # 3a87ad; margine: 5px 0; raza de graniță: 3 pixeli; text-shadow: 1px 1px 1px alb; .map-buton: hover, .map-buton: focus background: # b1dce5; text-decoration: nici unul; / * Anulați orice umplutură implicită pe elementele "p" * / #directions p margin-bottom: 0; / * Reglați modul în care se afișează elementul de intrare * / # de la intrare margine: 5px 0; raza de graniță: 3 pixeli; padding: 5px;
Acum, puteți merge și introduceți fișierul înăuntru wpmap_map cod scurt.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ',', false); wp_enqueue_style ('stil de tip wptuts'); Acum, să adăugăm marcajul pentru butoanele noastre wpmap_directions_input cod scurt.
div și aplicați "ascuns'pe care am definit-o în CSS. Apoi, putem elimina mai târziu această clasă dacă este activată locația geografică.WPmap.getDirections metoda ('manual"sau"geo') - acest lucru ne permite să avem funcționalitatea originală (în cazul în care un utilizator introduce o adresă manual) împreună cu noua metodă de localizare geografică.deschidere eticheta este locul în care vom introduce linkul special care va deschide aplicația Hartă pe telefoane mobile și tablete. Există un pic de lucru implicat în construirea link-ului corect, așa că vom examina mai îndeaproape acest lucru mai târziu în secțiunea JavaScript a acestui tutorial. funcția wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Pentru Direcții de conducere, introduceți adresa dvs. de mai jos:
Obțineți indicații de conducere
Alternativ, puteți
Utilizați locația dvs. curentă „; returnați outputul $; Până în prezent, în ceea ce privește tutorialul original, avem:
Apoi, vom examina modificările JavaScript. Există destul de multe pentru această secțiune următoare, așa că în loc să faceți o comparație directă cu originalul, voi face tot posibilul pentru a explica ce se întâmplă în fiecare metodă / funcție și puteți revizui fișierele sursă completă la sfârșit pentru a vedea cum se potriveste cu toata lumea.
Acum vine partea distractivă. În primul tutorial, al nostru init () metoda a fost responsabilă pentru instanțierea hărții în același format pentru fiecare încărcare de pagină. Acest lucru înseamnă că toată lumea ar primi aceeași funcționalitate, indiferent de capacitățile dispozitivului - este timpul să schimbăm acest lucru!
Atunci când un utilizator vizitează site-ul nostru utilizând un smartphone, de exemplu, dorim să îi oferim posibilitatea de a utiliza locația lor actuală în loc să o introducă manual. De asemenea, dorim ca abilitatea de a lansa aplicația Hărți native pe telefon și de a avea planul automat planificat.
API-ul GeoLocation JavaScript este unul dintre cele mai bine susținute dintre toate caracteristicile noi ale HTML5. Peste 75% din toate browserele par să o susțină în conformitate cu caniuse.com. Cred că asta înseamnă că suntem destul de în siguranță! (Vom oferi oricum o reducere pentru browserele mai vechi :))
Acum, să săpăm JavaScript.
Puneți pur și simplu, tot ceea ce căutăm să faceți aici este să oferiți opțiunea de a utiliza locația geografică dacă este disponibilă. În caz contrar, utilizatorii vor putea să introducă o adresă manuală.
Dacă vă uitați la fluxul de control simplificat (de mai jos), puteți vedea că folosim aceleași metode pentru a configura harta, dar un cuplu mai mult dacă locația geografică este activată.
OK, cred că avem o bună înțelegere a ceea ce încercăm să realizăm aici, așa că acum voi oferi o explicație a fiecărei metode în mod individual - ca întotdeauna, vă rugăm să consultați fișierele sursă pentru a vedea cum se potrivește totul în același fișier.
Aici vom interoga DOM pentru a prelua câteva proprietăți pe care le vom folosi mai târziu. De asemenea, obținem câteva obiecte din API care se vor ocupa de solicitarea "primiți instrucțiuni".
var WPmap = // Elemente pe care le vom folosi mai târziu! MapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), inInput: document.getElementById ('map-config-address' ), unitInput: document.getElementById ('unitate de intrare'), geoDirections: document.getElementById ('geo-directions'), nativeLinkElem: document.getElementById ('native-link'), startLatLng: , geoLocation: null, geoLat: null, geoLon: null, / / Obiecte API Google Maps dirService: nou google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), hartă: null, / ** WPmap Object continuă în tutorial ** / init ()Aceasta este prima metodă care va fi apelată când pagina noastră este încărcată.
init () este metoda de manipulare a evenimentului pe care o folosim pentru a afișa un mesaj către utilizator când se solicită direcții. Notă: Acest lucru este opțional - nu ezitați să îl eliminați.init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // lucruri de făcut dacă browserul acceptă GeoLocation. WPmap.getGeoCoords (); WPmap.getDestination (); // a asculta când sunt solicitate Direcțiile google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // închide primul infoWindow marker.setVisible (false); // remove primul marcator // configurați șirurile de configurare care urmează să fie utilizate var distancestring = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // setați conținutul infoWindow înainte de al deschide din nou. setContent ( "Mulțumiri!
Se pare că ai de gând '+ distanța + șir +' departe de noi.
Direcțiile sunt chiar sub hartă "); // redeschideți infoWindow infoWindow.open (WPmap.map, marker); setTimeout (funcția () infoWindow.close (), 8000); // închideți-l după 8 secunde. ); // inițializare
Bine, am arătat init () metodă mai întâi de această dată, astfel încât să puteți înțelege cum va funcționa fluxul de control.
Acum vă voi arăta metodele implicate când un utilizator are capacitățile de localizare geografică.
getGeo ()Totul începe cu detectarea standard a caracteristicilor,.
Pentru a determina dacă un browser acceptă sau nu GeoLocation, tot ce facem este să verificăm existența navigator.geolocation obiect.
getGeo: funcția () if (!! navigator.geolocation) returnează navigator.geolocation; altceva se întoarce nedefinit; ,
getGeoCoords ()Acum, că știm că browserul are o locație geografică, putem merge și cerem coordonatele actuale.
getCurrentPosition () și treceți doi parametri - o funcție de apel de succes și o funcție de retur a apelului de eroaregetGeoCoords: funcția () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Acesta este apelul nostru de succes. Dacă ajungem atât de departe, am reușit să preluăm coordonatele utilizatorului.
poziţie va fi un obiect care conține informațiile despre locația geografică, astfel încât să putem merge mai departe și să setăm valorile Lat / Lon la proprietățile obiectului.showGeoButton () pentru a afișa butonul pentru utilizarea locației curente.setNativeMapLink () pentru a construi link-ul care va deschide aplicațiile de hărți native.setGeoCoords: funcție (poziție) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Aceasta va rezolva erorile primite de la getCurrentPosition () - acest lucru este foarte util în dezvoltarea, dar în producție este posibil să doriți să îl eliminați, deoarece noi oferim o rezervă pentru intrarea în adresa manuală oricum.
geoError: funcție (eroare) var message = ""; // Verificați comutarea erorilor cunoscute (error.code) error error.PERMISSION_DENIED: message = "Acest site nu are permisiunea de a utiliza API-ul de localizare geografică"; pauză; caz error.POSITION_UNAVAILABLE: message = "Ne pare rău, poziția dvs. actuală nu poate fi determinată, introduceți adresa dvs. în schimb."; pauză; caz error.PERMISSION_DENIED_TIMEOUT: message = "Ne pare rău, avem probleme în a încerca să determinăm locația dvs. curentă, vă rugăm să introduceți adresa dvs."; pauză; dacă (mesaj == "") var strErrorCode = error.code.toString (); message = "Poziția nu a putut fi determinată din cauza unei erori necunoscute (Cod:" + strErrorCode + ")."; console.log (mesaj); ,
showGeoButtonAfișați butonul "obțineți locația curentă".
.ascuns folosind clasa .removeClass (). Aceasta este o metodă de ajutor care face ca eliminarea clasei pe elementele HTML să fie mult mai simplă (va fi în partea de jos a fișierelor sursă) showGeoButton: funcția () var geoContainer = document.getElementById ('geo-directions'); geoContainer.removeClass ( 'ascuns'); , setNativeMapLink ()Acesta este linkul special care va deschide aplicații de hărți native pe dispozitive iOS și Android. Deoarece am salvat anterior valorile Lat / Lon actuale pentru obiectul nostru, acum putem genera cu ușurință legătura cu formatul corect.
setNativeMapLink: funcție () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destinație = WPmap.toInput.value; var newdest = destinație.replace (","); WPmap.nativeLinkElem.innerHTML = ("Deschide în Google Maps"); , getDestination ()Aici determinăm dacă administratorul a introdus o valoare Lat / Lon sau o adresă obișnuită în pagina Opțiuni:
toInput este o valoare Lat / Lon utilizând o expresie regulată.WPmap.destination egal cu a google.maps.LatLng obiect.google.maps.Geocoder () pentru a converti adresa într-o google.maps.LatLng obiect și setați ca destinație.setupMap () getDestination: funcția () var toInput = WPmap.toInput.value; var isLatLon = (/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(toInput)); dacă (isLatLon) var n = WPmap.toInput.value.split (","); WPmap.destination = nou google.maps.LatLng (n [0], n [1]); WPmap.setupMap (); altceva geocoder = nou google.maps.Geocoder (); geocoder.geocode ( 'adresa': WPmap.toInput.value, funcție (rezultate, stare) WPmap.destination = rezultate [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Foarte similar cu originalul - configurați harta cu marcatorul centrat pe destinația noastră și textul din opțiunile de administrare din interiorul ferestrei infoWindow.
/ * Inițializați harta * / setupMap: funcția () // obțineți conținutul var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var inițialZoom = WPmap.mapContainer.getAttribute ("date-map-zoom"); WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom) // asigura că vine prin ca un centru de Integer: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); marker = nou google.maps.Marker (map: WPmap.map, poziție: WPmap.destination, draggable: false); // setați conținutul infowindow infoWindow = nou google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcator); , a primi direcții()Aceasta se numește ori de câte ori sunt solicitate indicații. Singurul său argument, "cerere", ne va ajuta să determinăm dacă utilizatorul a dat clic pe buton pentru a utiliza o adresă introdusă manual sau o locație" actuală ".
getDirections: funcția (cerere) // Obțineți codul poștal introdus var dinStr = WPmap.fromInput.value; var dirRequest = origine: fromStr, destinatie: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // verifica dacă utilizatorul a făcut clic 'utilizați locația curentă' în cazul în care (cererea == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Neschimbată față de original - se ocupă de introducerea indicațiilor în pagină.
/ ** * Ieșiți Direcțiile în pagină. * / ShowDirections: Funcția (dirResult, dirStatus) if (dirStatus = google.maps.DirectionsStatus.OK!) Comutator (dirStatus) caz "ZERO_RESULTS": alert ( 'Ne pare rău, putem \' t oferă direcții la acea adresă (poate că sunteți prea departe, sunteți în aceeași țară ca noi?) Vă rugăm să încercați din nou. '); pauză; cazul "NOT_FOUND": alertă ("Ne pare rău că nu am înțeles adresa pe care ați introdus - încercați din nou."); pauză; implicit: alertă ("Ne pare rău, a apărut o problemă la generarea direcțiilor. Încercați din nou.") retur; // Afișați instrucțiunile WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , În afara obiectului, doar ascultătorul evenimentului adaugă că va încărca harta când pagina este gata și funcția de ajutor despre care am vorbit mai devreme.
/ * Încărcați harta când pagina este gata * / google.maps.event.addDomListener (fereastra, 'încărcare', WPmap.init); / * Funcție pentru a elimina cu ușurință orice clasă de la un element. * / HTMLElement.prototype.removeClass = funcție (eliminați) var newClassName = ""; var i; var clase = this.className.split (""); pentru (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Acum, pentru a obține totul de lucru trebuie doar să puneți Hartă folder în tema dvs. și apoi rulați prin lucrurile pe care le-am abordat în primul tutorial.
Include map.php în tema ta functions.php
/ ** În funcțiile.php ** / include ('map / map.php'); [Wpmap_map][Wpmap_directions_input][Wpmap_directions_container]După cum am menționat, este un lucru Actualizați la acest tutorial și, de aceea, trebuie să le revizuiți pe amândoi pentru a înțelege pe deplin întregul proces. Posibil cel mai simplu mod de a înțelege cum se potrivesc toate ar fi să vizualizați fișierele sursă furnizate deși.
După toate acestea, ar trebui să aveți o aplicație de hartă destul de îngrijită, care să răspundă dimensiunilor diferite ale ecranului și să adauge funcții suplimentare utilizatorilor cu browsere moderne. Cu toate acestea, oferind o schimbare bună pentru toți ceilalți.
