Share
Deze tutorial is een update van een vorige waarin we hebben bekeken hoe je rij-instructies rechtstreeks op een WordPress-website kunt weergeven met behulp van de Google Maps API.
In de eerste zelfstudie moesten onze gebruikers hun adres handmatig invoeren in een formulier op de website - vervolgens werden de aanwijzingen weergegeven. Dit was een goed voorbeeld van het gebruik van de Google Maps API, maar de mogelijkheid om gebruikers te detecteren huidige locatie, naast het handmatig kunnen invoeren van een adres, was een functie vaak gevraagd.
Er is nogal wat terrein om hier te bespreken, maar een groot deel daarvan werd behandeld in de vorige tutorial. Om me te voorkomen dat ik mezelf moet herhalen, moet je de eerste zelfstudie "Geef je klanten routebeschrijvingen" doorlezen, waar je alles vindt wat niet in deze handleiding wordt uitgelegd.
Dit is een lijst met dingen die we zijn niet gaan behandelen in deze tutorial. Dus voel je vrij om de originele tutorial te lezen voor gedetailleerde uitleg:
Notitie: Als u de eerste zelfstudie leest, begrijpt u de onderdelen die niet in deze zelfstudie worden uitgelegd. De code in de bron bestanden bevatten alles wat je nodig hebt.
Naast wat we in de vorige tutorial hebben bereikt, zullen we ook:
Andere verbeteringen aan het origineel:
We voegen een toe klein stukje CSS om het uiterlijk / de lay-out van onze kaart en knoppen te verbeteren, dus we zullen een externe CSS-stylesheet maken in onze kaart directory.
In uw themamap, uw kaart directory zou er nu als volgt uit moeten zien:
In de eerste zelfstudie hebben we een aantal CSS-regels toegevoegd aan de hoofdstijlpagina van het thema, style.css. Grijp die lijnen en plaats ze in dit nieuwe CSS-bestand samen met alles wat je hieronder ziet.
Notitie: Deze stijlen zijn geschreven om te werken met het Twenty Eleven-thema. Misschien vindt u de vulling, marges of kleuren mogelijk niet perfect bij uw thema. Daarom moet u zich vrij voelen om dit aan te passen - het heeft geen invloed op de functionaliteit :)
# map-container img max-width: none; / * Van originele tut * / # map-container width: 100%; hoogte: 400 px; / * Uit originele tut * / / * verkleint de hoogte van de kaart op kleinere schermen * / @media only screen en (max-width: 767px) # map-container height: 235px; / * Een klasse die we zullen gebruiken om sommige elementen later te verbergen * / .hidden display: none; / * Knopstijlen - bewerken naar believen! * / .map-knop weergave: blok; opvulling: 5px; achtergrond: # d9edf7; border: 1px solid # bce8f1; kleur: # 3a87ad; marge: 5px 0; grensradius: 3px; tekstschaduw: 1px 1px 1px wit; .map-knop: hover, .map-button: focus background: # b1dce5; tekstdecoratie: geen; / * Annuleer standaard opvulling op 'p' elementen * / #directions p margin-bottom: 0; / * Aanpassen hoe het invoerelement * / # from-input margin: 5px 0; grensradius: 3px; opvulling: 5px;
Nu kunt u doorgaan en het bestand in de wachtrij plaatsen wpmap_map Korte code.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style'); Laten we nu de markeringen voor de knoppen toevoegen aan onze wpmap_directions_input Korte code.
div en pas de 'verborgen'klasse die we hebben gedefinieerd in onze CSS. Dan kunnen we deze klasse later verwijderen als de geografische locatie is ingeschakeld.WPmap.getDirections methode ('met de hand'of'geo-') - hiermee kunnen we de originele functionaliteit (waarbij een gebruiker handmatig een adres invoert) samen met de nieuwe geolokalisatiemethode invoeren.span tag is waar we de speciale link invoegen die de kaarttoepassing op mobiele telefoons en tablets opent. Er is een beetje werk aan de hand bij het correct construeren van de link, dus we zullen dit later in de JavaScript-sectie van deze tutorial van naderbij bekijken.. function wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Voor routebeschrijvingen voert u hieronder uw adres in:
Krijg routebeschrijving
Als alternatief kunt u
Gebruik uw huidige locatie '; return $ output; Tot nu toe hebben we, met betrekking tot de originele zelfstudie:
Vervolgens zullen we de JavaScript-wijzigingen bekijken. Dit volgende gedeelte bevat nogal wat dingen, dus in plaats van een directe vergelijking te maken met het origineel, zal ik gewoon mijn best doen om uit te leggen wat er in elke methode / functie gebeurt en aan het einde de volledige bronbestanden bekijken om te zien hoe het allemaal bij elkaar past.
Nu komt hier het leuke gedeelte. In de eerste zelfstudie, onze in het() methode was verantwoordelijk voor het instantiëren van de kaart in hetzelfde formaat voor elke pagina laden. Dit betekende dat iedereen exact dezelfde functionaliteit zou ontvangen, ongeacht de apparaatmogelijkheden - het is tijd om dat te veranderen!
Wanneer een gebruiker onze website bezoekt met behulp van een smartphone, willen we hen bijvoorbeeld de mogelijkheid bieden om hun huidige locatie te gebruiken in plaats van deze handmatig in te voeren. We willen ook de mogelijkheid om de native Maps-applicatie op de telefoon te starten en de route automatisch gepland te hebben.
De JavaScript-API voor GeoLocation is een van de meest goed ondersteunde van alle zogenaamde HTML5-nieuwe functies. Meer dan 75% van alle browsers lijkt het te ondersteunen volgens caniuse.com. Ik denk dat dat betekent dat we behoorlijk veilig zijn! (We zullen hoe dan ook een terugval bieden voor oudere browsers :))
Laten we nu in het JavaScript duiken.
Simpel gezegd, alles wat we hier willen doen, is de optie om geolocatie te gebruiken als deze beschikbaar is. Als dit niet het geval is, kunnen gebruikers nog steeds een adres handmatig invoeren.
Als je de vereenvoudigde controlestroom bekijkt (hieronder), kun je zien dat we dezelfde methoden gebruiken om de kaart in te stellen, maar een paar meer als de geolocatie is ingeschakeld.
OK, ik denk dat we een goed begrip hebben van wat we hier proberen te bereiken, dus nu zal ik een uitleg geven van elke methode afzonderlijk - zoals altijd, raadpleeg de bronbestanden om te zien hoe alles in hetzelfde bestand bij elkaar past.
Hier vragen we de DOM om een aantal eigenschappen op te halen die we later zullen gebruiken. We krijgen ook een aantal objecten uit de API die het verzoek om een routebeschrijving 'ophalen' afhandelen.
var WPmap = // HTML-elementen die we later zullen gebruiken! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- invoer '), unitInput: document.getElementById (' unit-input '), geoDirections: document.getElementById (' geo-directions '), nativeLinkElem: document.getElementById (' native-link '), startLatLng: null, bestemming: null , geoLocation: null, geoLat: null, geoLon: null, // Google Maps API Objects dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / ** WPmap Object gaat door tijdens de tutorial ** / in het()Dit is de eerste methode die wordt aangeroepen wanneer onze pagina is geladen.
in het() methode is de gebeurtenishandler die we gebruiken om een bericht weer te geven voor de gebruiker wanneer om een routebeschrijving wordt gevraagd. Notitie: Dit is optioneel - u kunt het verwijderen.init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // Wat te doen als de browser GeoLocation ondersteunt. WPmap.getGeoCoords (); WPmap.getDestination (); // listen for when Directions worden gevraagd google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // sluit de eerste infoWindow marker.setVisible (false); // remove de eerste markering // set-up reeksen die moet worden gebruikt var afstandString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // stel de inhoud van het infoWindow in voordat we het opnieuw openen. setContent ( 'Thanks!
Het lijkt erop dat je het over hebt '+ distanceString +' weg van ons.
Aanwijzingen staan net onder de kaart '); // open de infoWindow infoWindow.open (WPmap.map, marker) opnieuw; setTimeout (function () infoWindow.close (), 8000); // sluit het na 8 seconden. ); //in het
Ok, ik heb de in het() methode eerst deze keer zodat u kunt begrijpen hoe de regelstroom zal werken.
Nu zal ik u de gebruikte methoden laten zien wanneer een gebruiker heeft geo locatie mogelijkheden.
getGeo ()Het begint allemaal met standaard 'functieherkenning'.
Om te bepalen of een browser GeoLocation ondersteunt of niet, controleren we alleen het bestaan van de navigator.geolocation voorwerp.
getGeo: function () if (!! navigator.geolocation) return navigator.geolocation; anders wordt undefined geretourneerd; ,
getGeoCoords ()Nu we weten dat de browser een geolocatie heeft, kunnen we doorgaan en de huidige coördinaten opvragen.
getCurrentPosition () en geef twee parameters door: een succes-callback-functie en een fout-callback-functiegetGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Dit is onze callback voor succes. Als we zover komen, hebben we met succes de coördinaten van de gebruiker opgehaald.
positie zal een object zijn met de geolocatie-informatie zodat we door kunnen gaan en de Lat / Lon-waarden kunnen instellen op objecteigenschappen.showGeoButton () om de knop weer te geven voor het gebruik van de huidige locatie.setNativeMapLink () om de link te bouwen die de lokale kaartapplicaties zal openen.setGeoCoords: function (position) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Hiermee worden eventuele fouten verwerkt die zijn ontvangen getCurrentPosition () - dit is zeer nuttig in de ontwikkeling, maar in de productie zou je het misschien willen verwijderen, omdat we toch een terugval bieden naar de handmatige adresinvoer.
geoError: function (error) var message = ""; // Controleer op bekende foutenschakelaar (error.code) case error.PERMISSION_DENIED: message = "Deze website heeft geen toestemming om de Geo location API te gebruiken"; breken; case error.POSITION_UNAVAILABLE: message = "Sorry, je huidige positie kan niet worden bepaald, voer in plaats daarvan je adres in."; breken; case error.PERMISSION_DENIED_TIMEOUT: message = "Sorry, we ondervinden problemen bij het bepalen van uw huidige locatie, voer in plaats daarvan uw adres in."; breken; if (message == "") var strErrorCode = error.code.toString (); message = "De positie kon niet worden bepaald vanwege een onbekende fout (Code:" + strErrorCode + ")."; console.log (bericht); ,
showGeoButtonToon de knop 'huidige locatie ophalen'.
.verborgen klasse gebruiken .removeClass (). Dit is een hulpmethode die het verwijderen van klassen op HTML-elementen veel eenvoudiger maakt (deze staat onderaan de bronbestanden) showGeoButton: function () var geoContainer = document.getElementById ('geo-directions'); geoContainer.removeClass ( 'verborgen'); , setNativeMapLink ()Dit is de speciale link waarmee native kaarttoepassingen op iOS- en Android-apparaten kunnen worden geopend. Omdat we eerder de huidige Lat / Lon-waarden voor ons object hebben opgeslagen, kunnen we nu eenvoudig de link met het juiste formaat genereren.
setNativeMapLink: function () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Openen in Google Maps'); , getDestination ()Hier bepalen we of de beheerder een Lat / Lon-waarde of een normaal adres heeft ingevoerd op de pagina Opties:
invoeren is een Lat / Lon-waarde met behulp van een reguliere expressie.WPmap.destination gelijk aan a google.maps.LatLng voorwerp.google.maps.Geocoder () om het adres in een te converteren google.maps.LatLng object en stel dat in als de bestemming.setupMap () getDestination: function () var toInput = WPmap.toInput.value; var isLatLon = (/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\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 ('adres': WPmap.toInput.value, functie (resultaten, status) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Zeer vergelijkbaar met het origineel - stel de kaart in met de markering gecentreerd op onze bestemming en de tekst van de Admin-opties in het infoWindow.
/ * Initialiseer de kaart * / SetupMap: function () // haal de content 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), // zorg ervoor dat het doorkomt als een Integer center: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); marker = new google.maps.Marker (map: WPmap.map, positie: WPmap.destination, draggable: false); // stel de infowindow-content infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); , de weg vragen()Dit wordt aangeroepen wanneer richtingen worden aangevraagd. Het enige argument, 'verzoek', helpt ons te bepalen of de gebruiker op de knop heeft geklikt om een handmatig ingevoerd adres of de' huidige locatie 'te gebruiken.
getDirections: function (request) // Haal de postcode op die is ingevoerd var fromStr = WPmap.fromInput.value; var dirRequest = origin: fromStr, destination: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // controleer of de gebruiker op 'gebruik huidige locatie' klikte (request == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Onveranderd van het origineel - het behandelt de invoeging van de richtingen in de pagina.
/ ** * De routebeschrijving naar de pagina uitvoeren. * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alert ('Sorry, we kunnen geen routebeschrijving naar dat adres opgeven (u bent misschien te ver weg, bent u in hetzelfde land als wij?) Probeer het opnieuw aub. '); breken; case "NOT_FOUND": alert ('Sorry, we hebben het ingevoerde adres niet begrepen - Probeer het opnieuw.'); breken; standaard: alert ('Sorry, er was een probleem bij het genereren van de routebeschrijving. Probeer het opnieuw.') terug; // Toon aanwijzingen WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , Buiten het object is er alleen de gebeurtenislistener om toe te voegen die de kaart laadt wanneer de pagina gereed is en de helperfunctie waar we eerder over gesproken hebben.
/ * Laad de kaart wanneer de pagina gereed is * / google.maps.event.addDomListener (venster, 'load', WPmap.init); / * Functie om elke klasse gemakkelijk van een element te verwijderen. * / HTMLElement.prototype.removeClass = function (remove) var newClassName = ""; var i; var classes = this.className.split (""); voor (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Om alles te laten werken hoef je alleen maar de kaart om naar uw thema te bladeren en vervolgens de dingen te bespreken die we in de eerste zelfstudie hebben behandeld.
omvatten map.php in je thema's functions.php
/ ** In functions.php ** / include ('map / map.php'); [Wpmap_map][Wpmap_directions_input][Wpmap_directions_container]Zoals ik al zei is dit een bijwerken deze tutorial en daarom moet je ze echt herzien om het hele proces volledig te begrijpen. Misschien is de gemakkelijkste manier om te begrijpen hoe alles in elkaar steekt, het bekijken van de bronbestanden die worden verstrekt.
Na dit alles zou je een vrij nette, kleine kaartapplicatie moeten hebben die op verschillende schermformaten reageert en ook extra functionaliteit toevoegt aan gebruikers met moderne browsers. Al die tijd zorgt het voor een goede terugval voor iedereen.
