Share
Denna handledning är en uppdatering till en tidigare, där vi tittade på hur man visar körinstruktioner direkt på en WordPress-webbplats med hjälp av Google Maps API.
I den första handledningen måste våra användare manuellt ange deras adress i en blankett på webbplatsen - då skulle anvisningarna visas. Detta var ett bra exempel på hur du använder Google Maps API men möjligheten att upptäcka användarnas " nuvarande position, förutom att kunna ange en adress manuellt var en funktion som ofta begärdes.
Det finns en hel del mark för att täcka här, men en stor del av den var täckt av föregående handledning. För att rädda mig att behöva upprepa mig själv, läs igenom den första handledningen "Ge dina kunders färdväg" där du hittar allt som inte förklaras i den här.
Det här är en lista över saker vi är inte kommer att täcka i denna handledning. Så gärna granska den ursprungliga handledningen för detaljerade förklaringar:
Notera: Att läsa den första handledningen hjälper dig att förstå de delar som inte förklaras i denna handledning. Koden som tillhandahålls i källa filer innehåller allt du behöver.
Förutom vad vi uppnådde i den tidigare handledningen kommer vi också att:
Andra förbättringar av originalet:
Vi lägger till en mycket liten lite CSS för att förbättra utseendet på vår karta och knappar, så vi skapar ett externt CSS-stilark i vår Karta katalog.
Inne i tematmappen, din Karta katalog ska nu se ut så här:
I den första handledningen lade vi till ett par rader av CSS i tematets huvudsakliga stilark, style.css. Ta tag i dessa rader och sätt in dem i den nya CSS-filen tillsammans med allt du ser nedan.
Notera: Dessa stilar skrevs för att arbeta med stock tjugo elva temat. Det kan hända att polstring, marginaler eller färger inte passar ditt tema perfekt. Därför borde du gärna anpassa något av detta - det påverkar inte funktionaliteten :)
# map-container img max-width: none; / * Från original tut * / # map-container bredd: 100%; höjd: 400px; / * Från original tut * / / * Minska höjden på kartan på mindre skärmar * / @media bara skärm och (maxbredd: 767px) # map-container höjd: 235px; / * En klass vi ska använda för att dölja några element senare * / .hidden display: none; / * Knappstilar - redigera vid vilja! * / .mapp-knapp display: block; vaddering: 5px; bakgrund: # d9edf7; gräns: 1px fast # bce8f1; färg: # 3a87ad; marginal: 5px 0; gränsstråle: 3px; textskugga: 1px 1px 1px vit; . mappknapp: svep, .mapp-knapp: fokus bakgrund: # b1dce5; text-dekoration: ingen; / * Avbryt eventuell standardpolning på "p" -element * / #directions p margin-bottom: 0; / * Justera hur inmatningselementet visar * / # från-input margin: 5px 0; gränsstråle: 3px; vaddering: 5px;
Nu kan du gå och skicka in filen i wpmap_map kortkod.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/ map / map.css', ",", false); wp_enqueue_style ('wptuts-style'); Låt oss nu lägga till markeringen för knapparna i vår wpmap_directions_input kortkod.
div och tillämpa "dold"klass som vi definierade i vår CSS. Då kan vi ta bort den här klassen senare om geo-läge är aktiverat.WPmap.getDirections metod ('manuell"eller"geo') - det här låter oss ha den ursprungliga funktionaliteten (där en användare skriver in en adress manuellt) tillsammans med den nya geografiska placeringsmetoden.spänna tagg är där vi lägger in den speciella länken som öppnar kartapplikationen på mobiler och surfplattor. Det finns lite arbete med att bygga länken på rätt sätt, så vi kommer att titta närmare på det senare i JavaScript-avsnittet i denna handledning. funktion wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' För Körbeskrivning, Ange din adress nedan:
Få körbeskrivning
Alternativt kan du
Använd din nuvarande plats '; returnera $ output; Hittills, i förhållande till den ursprungliga handledningen har vi:
Därefter tar vi en titt på JavaScript-modifieringarna. Det finns en hel del i det här avsnittet, så istället för att göra en direkt jämförelse med originalet gör jag bara mitt bästa för att förklara vad som händer i varje metod / funktion och du kan granska de fullständiga källfilerna i slutet för att se hur allt passar ihop.
Nu kommer den roliga delen. I den första handledningen, vår i det() Metoden var ansvarig för att instansera kartan i samma format för varje sidbelastning. Detta innebar att alla skulle få exakt samma funktionalitet oavsett enhetskapacitet - det är dags att ändra det!
När en användare besöker vår webbplats med hjälp av en smartphone vill vi till exempel kunna erbjuda dem möjligheten att använda sin nuvarande plats istället för att manuellt skriva in den. Vi vill också ha möjlighet att starta den inbyggda kartapplikationen på telefonen och få rutten automatiskt planerad.
GeoLocation JavaScript API är ett av de mest välskötta av alla de så kallade HTML5 nya funktionerna. Över 75% av alla webbläsare verkar stödja det enligt caniuse.com. Jag tror det betyder att vi är ganska säkra! (Vi ger ändå en återgång till äldre webbläsare ändå :))
Låt oss nu gräva i JavaScript.
Enkelt sagt, allt vi letar efter här gör det möjligt att använda geo-plats om den är tillgänglig. Om det inte är det kommer användarna fortfarande att kunna ange en adress manuellt.
Om du tittar på det förenklade kontrollflödet (nedan) kan du se att vi använder samma metoder för att ställa in kartan, men ett par mer om geo-läge är aktiverat.
OK, jag tror att vi har en bra förståelse för vad vi försöker göra här så nu ska jag förklara varje metod individuellt - som alltid, hänvisa till källfilerna för att se hur allt passar ihop i samma fil.
Här frågar vi DOM för att hämta några egenskaper som vi ska använda senare. Vi får också ett par objekt från API som hanterar begäran om "få vägbeskrivningar".
var WPmap = // HTML Elements vi ska använda senare! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tillInput: document.getElementById ('map-config-adress'), frånInput: document.getElementById 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, // Google Maps API Objekt dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), karta: null, / ** WPmap Object fortsätter under hela handledningen ** / i det()Det här är den första metoden som kommer att ringas när vår sida laddas.
i det() Metod är händelsehanteraren som vi använder för att visa ett meddelande till användaren när riktningar begärs. Notera: Detta är valfritt - ta gärna bort det.init: funktion () if (WPmap.geoLoc = WPmap.getGeo ()) // saker att göra om webbläsaren stöder GeoLocation. WPmap.getGeoCoords (); WPmap.getDestination (); // lyssna på när Vägbeskrivning begärs google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funktion () infoWindow.close (); // stäng den första infoWindow marker.setVisible (false); // ta bort den första markören // inställningssträngar som ska användas. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // Ange innehållet i infoWindow innan vi öppnar det igen. infoWindow. setContent ( "Tack!
Det ser ut som om du är om '+ avståndstring +' bort från oss.
Vägbeskrivning ligger strax nedanför kartan '); // öppna informationenWindow infoWindow.open (WPmap.map, marker); setTimeout (funktion () infoWindow.close (), 8000); // stäng den efter 8 sekunder. ); //i det
Ok, jag har visat i det() metod först den här gången så att du kan förstå hur kontrollflödet kommer att fungera.
Nu ska jag visa vilka metoder som används när en användare har geografisk plats kapacitet.
getGeo ()Allt börjar med standard "funktiondetektering".
För att avgöra om en webbläsare stöder GeoLocation eller inte, är allt vi gör för att kontrollera att det finns navigator.geolocation objekt.
getGeo: funktion () om (!! navigator.geolocation) returnera navigator.geolocation; ellers returnera odefinierad; ,
getGeoCoords ()Nu när vi vet att webbläsaren har geografisk plats kan vi fortsätta och be om aktuella koordinater.
getCurrentPosition () och skicka två parametrar - en återuppringningsfunktion och en återuppringningsfunktiongetGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Detta är vår framgångsbackback. Om vi kommer så långt har vi lyckats hämta koordinaterna för användaren.
placera kommer att vara ett objekt som innehåller geo-platsinformationen så att vi kan fortsätta och ställa in Lat / Lon-värdena till objektegenskaper.showGeoButton () för att visa knappen för att använda aktuell plats.setNativeMapLink () att konstruera länken som öppnar inbyggda kartapplikationer.setGeoCoords: funktion (position) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Detta hanterar eventuella fel som tas emot från getCurrentPosition () - Det här är väldigt användbart i utvecklingen, men i produktionen kanske du vill ta bort det eftersom vi ger en återgång till den manuella adressinmatningen ändå.
geoError: funktion (fel) var message = ""; // Sök efter känd felbrytare (error.code) case error.PERMISSION_DENIED: message = "Den här webbplatsen har inte behörighet att använda Geo-plats API"; ha sönder; fallfel.POSITION_UNAVAILABLE: message = "Tyvärr, din nuvarande position kan inte bestämmas, var vänlig skriv in din adress istället."; ha sönder; case error.PERMISSION_DENIED_TIMEOUT: message = "Tyvärr, vi har problem med att försöka bestämma din nuvarande plats, var god ange din adress istället."; ha sönder; om (meddelande == "") var strErrorCode = error.code.toString (); message = "Positionen kunde inte bestämmas på grund av ett okänt fel (Kod:" + strErrorCode + ")."; console.log (meddelande); ,
showGeoButtonVisa knappen "få aktuell plats".
.dold klass med hjälp av .removeClass (). Detta är en hjälpmetod som gör att avlägsna klasser på HTML-element mycket enklare (det kommer att ligga längst ner i källfilerna) showGeoButton: funktion () var geoContainer = document.getElementById ('geo-directions'); geoContainer.removeClass ( 'dold'); , setNativeMapLink ()Det här är den speciella länken som öppnar inbyggda kartprogram på IOS och Android-enheter. Eftersom vi tidigare sparade de aktuella Lat / Lon-värdena till vårt objekt, kan vi nu enkelt skapa länken med rätt format.
setNativeMapLink: funktion () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Öppna i Google Maps'); , getDestination ()Här avgör vi om administratören har angett ett Lat / Lon-värde eller en vanlig adress på sidan Alternativ:
Att mata in är ett Lat / Lon-värde med hjälp av ett reguljärt uttryck.WPmap.destination lika med a google.maps.LatLng objekt.google.maps.Geocoder () att konvertera adressen till en google.maps.LatLng objekt och sätt det som destination.setupMap () getDestination: function () var toInput = WPmap.toInput.value; var isLatLon = (/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(toInput)); om (isLatLon) var n = WPmap.toInput.value.split (","); WPmap.destination = nya google.maps.LatLng (n [0], n [1]); WPmap.setupMap (); annars geocoder = nya google.maps.Geocoder (); geocoder.geocode ('adress': WPmap.toInput.value, funktion (resultat, status) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Mycket liknar originalet - ställ in kartan med markören centrerad på vår destination och texten från Admin-alternativen inuti infoWindow.
/ * Initiera kartan * / setupMap: funktionen () // få innehållet var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.map = nya google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), // se till att det kommer igenom som ett helhetscenter: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); markör = ny google.maps.Marker (map: WPmap.map, position: WPmap.destination, draggable: false); // Ange infowindow innehåll infoWindow = nya google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); , Få vägbeskrivningar()Detta kallas när riktningar begärs. Dess enda argument, "begäran', hjälper oss att avgöra om användaren klickade på knappen för att använda en manuellt inmatad adress eller den aktuella platsen.
getDirections: funktion (request) // Få postnumret som var inmatat var fromStr = WPmap.fromInput.value; var dirRequest = ursprung: fromStr, destination: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // kontrollera om användaren klickade på 'använd nuvarande plats' om (request == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Oförändrat från originalet - det hanterar införandet av anvisningarna i sidan.
/ ** * Utför riktningarna till sidan. * / showDirections: funktion (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alert ("Tyvärr, vi kan inte ge vägbeskrivningar till den adressen (du kanske för långt bort, är du i samma land som oss?) Försök igen. '); ha sönder; fallet "NOT_FOUND": alert ('Ledsen att vi inte förstod adressen du angav - Vänligen försök igen.'); ha sönder; standard: alert ("Tyvärr, det var ett problem att generera anvisningarna. Vänligen försök igen.") returnera; // Visa vägbeskrivning WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , Utanför objektet är det bara händelseläsenaren som lägger till det som laddar kartan när sidan är klar och hjälparfunktionen vi pratade om tidigare.
/ * Ladda kartan när sidan är klar * / google.maps.event.addDomListener (fönster, "ladda", WPmap.init); / * Funktion för att enkelt ta bort en klass från ett element. * / HTMLElement.prototype.removeClass = funktion (ta bort) var newClassName = ""; var jag; var klasser = this.className.split (""); för (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; För att få allt att fungera behöver du bara sätta Karta mapp i ditt tema och sedan springa igenom de saker vi täckte i den första handledningen.
Inkludera map.php i ditt tema functions.php
/ ** I functions.php ** / include ('map / map.php'); [Wpmap_map][Wpmap_directions_input][Wpmap_directions_container]Som jag har nämnt är detta en uppdatering till denna handledning och därför behöver du verkligen granska dem båda för att förstå hela processen. Möjligen är det enklaste sättet att förstå hur allt passar ihop att vara att se källfilerna som tillhandahålls.
Efter allt detta borde du ha en ganska snygg liten karta applikation som kommer att svara på olika skärmstorlekar och även lägga till extra funktionalitet för användare med moderna webbläsare. Allt som allt ger en bra nedgång för alla andra.
