Verwenden Sie die geografische Position, um Ihren Kunden eine Wegbeschreibung zu geben

Dieses Tutorial ist ein Update zu einem vorherigen, in dem wir beschrieben haben, wie Sie mithilfe der Google Maps-API direkt auf einer WordPress-Website Fahranweisungen anzeigen können.

Im ersten Tutorial mussten unsere Benutzer ihre Adresse manuell in ein Formular auf der Website eingeben - dann wurden die Anweisungen angezeigt. Dies ist ein gutes Beispiel für die Verwendung der Google Maps-API, aber die Fähigkeit, aktueller Standort, Neben der Möglichkeit, eine Adresse manuell einzugeben, wurde häufig eine Funktion angefordert.

Hier gibt es viel zu besprechen, aber ein großer Teil davon wurde im vorherigen Tutorial behandelt. Um mich nicht wiederholen zu müssen, lesen Sie bitte das erste Tutorial "Geben Sie Ihren Kunden eine Wegbeschreibung". Dort finden Sie alles, was in diesem nicht erklärt wird.

Was wir im Original behandelt haben

Dies ist eine Liste von Dingen, die wir sind nicht in diesem Tutorial behandeln. Schauen Sie sich also das ursprüngliche Tutorial an, um ausführliche Erklärungen zu erhalten:

So registrieren Sie benutzerdefinierte Einstellungen im WordPress Admin Panel. Die drei Einstellungsfelder waren für:
- Das Ziel
- Der im Infofenster anzuzeigende Text
- Die anfängliche Zoomstufe der Karte beim ersten Laden
So erhalten Sie mit dem Google Maps API V3-Beispiel einen wirklich genauen Lat / Lon-Wert für Ihr Ziel
So richten Sie die in diesem Lernprogramm verwendeten Kurzwahlen ein

Hinweis: Wenn Sie das erste Tutorial lesen, werden Sie die Teile besser verstehen, die in diesem Tutorial nicht erläutert werden. Der in der Quelle Dateien enthält alles, was Sie brauchen.

Was wir schaffen werden

Warum ist das besser als das Original??

Zusätzlich zu dem, was wir im vorherigen Tutorial erreicht haben, werden wir auch:

Ermitteln Sie, ob der Browser des Benutzers über geografische Standortfunktionen verfügt
Wenn dies der Fall ist, erlauben Sie ihnen, sie zu verwenden, anstatt eine Adresse manuell einzugeben
Stellen Sie einen speziellen Link zu Google Maps bereit. Wenn Sie darauf klicken (oder darauf tippen), öffnet dieser Link die native Maps-Anwendung auf dem Gerät, sofern verfügbar, und plant die Route automatisch. Dies ist besonders bei iOS- und Android-Geräten hilfreich

Andere Verbesserungen am Original:

Wir werden uns die verbesserte Fehlerbehandlung ansehen
Bisher musste der Site-Administrator die Latitude- und Longitude-Werte des Ziels in den WordPress-Einstellungen eingeben. Heute werden wir sehen, wie diese Lat / Lon-Werte akzeptiert werden oder eine reguläre Adresse. Dies bedeutet, dass der Administrator entweder einen Punkt auf der Karte (z. B. genaue Position eines Gebäudes) oder einfach nur die Adresse der Straße angeben kann.

Schritt 1 Erstellen Sie eine CSS-Datei

Wir werden eine hinzufügen winzig etwas CSS, um das Aussehen / Layout unserer Karte und Schaltflächen zu verbessern. In diesem Fall erstellen wir ein externes CSS-Stylesheet Karte Verzeichnis.

In Ihrem Themenordner, Ihrem Karte Das Verzeichnis sollte jetzt so aussehen:

map.php
map.js
map.css

Schritt 2 Fügen Sie CSS hinzu

Im ersten Tutorial haben wir ein paar CSS-Zeilen in das Stylesheet des Themes eingefügt, style.css. Schnappen Sie sich diese Zeilen und fügen Sie sie in diese neue CSS-Datei ein.

Hinweis: Diese Stile wurden für das aktuelle Twenty Eleven-Thema geschrieben. Möglicherweise stellen Sie fest, dass die Polsterung, Ränder oder Farben nicht perfekt zu Ihrem Thema passen. Daher sollten Sie das auch ändern können - die Funktionalität wird dadurch nicht beeinträchtigt :)

 # map-container img max-width: none;  / * Aus ursprünglichem Tut * / # map-container width: 100%; Höhe: 400px;  / * Vom ursprünglichen Tut * / / * die Höhe der Karte auf kleineren Bildschirmen verringern * / @media only und (max-width: 767px) # map-container height: 235px;  / * Eine Klasse, mit der wir später einige Elemente ausblenden * / .hidden display: none;  / * Button Styles - bearbeiten nach Belieben! * / .map-button display: block; Polsterung: 5px; Hintergrund: # d9edf7; Rahmen: 1px fest # bce8f1; Farbe: # 3a87ad; Marge: 5px 0; Grenzradius: 3px; Text-Schatten: 1px 1px 1px weiß;  .map-button: hover, .map-button: focus background: # b1dce5; Textdekoration: keine;  / * Deaktivieren Sie die Standardauffüllung für 'p'-Elemente. * / #Directions p margin-bottom: 0;  / * Anpassen, wie das Eingabeelement angezeigt wird * / # from-input margin: 5px 0; Grenzradius: 3px; Polsterung: 5px;

Nun können Sie fortfahren und die Datei in der wpmap_map Kurzcode.

 wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style');

Schritt 3 Fügen Sie das neue HTML für die Schaltflächen hinzu

Fügen wir nun das Markup für die Schaltflächen in unser ein wpmap_directions_input Kurzcode.

Da wir möchten, dass unsere neuen "Geo" - Schaltflächen nur für Benutzer angezeigt werden, die über die entsprechenden Funktionen verfügen, werden die Schaltflächen in eine eingebunden div und wende das 'versteckt'Klasse, die wir in unserem CSS definiert haben. Dann können wir diese Klasse später entfernen, wenn der geografische Standort aktiviert ist.
Diesmal senden wir einen Parameter an die WPmap.getDirections Methode ('Handbuch' oder 'Geo') - Dies ermöglicht uns, die ursprüngliche Funktionalität (wo ein Benutzer eine Adresse manuell eingibt) zusammen mit der neuen Geo-Standortmethode zu verwenden.
Die leere Spanne An diesem Tag fügen wir den speziellen Link ein, der die Kartenanwendung auf Mobiltelefonen und Tablets öffnet. Das korrekte Erstellen des Links erfordert etwas Arbeit. Wir werden uns das später im JavaScript-Abschnitt dieses Tutorials genauer ansehen.

 Funktion wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Geben Sie für die Anfahrtsbeschreibung unten Ihre Adresse ein:
   Anfahrtsbeschreibung abrufen 
   Alternativ können Sie
 Verwenden Sie Ihren aktuellen Standort   
 
'; return $ output;

Schneller Überblick

Bisher haben wir in Bezug auf das ursprüngliche Tutorial:

Erstellt eine CSS-Datei mit einfachem Styling und stellt sie in die Warteschlange.
Zusätzliche Markierung hinzugefügt, um neue Schaltflächen zu ermöglichen, die nur von modernen Browsern angezeigt werden.

Als Nächstes betrachten wir die JavaScript-Änderungen. In diesem nächsten Abschnitt gibt es eine Menge zu tun. Anstatt einen direkten Vergleich mit dem Original durchzuführen, werde ich nur mein Bestes geben, um zu erklären, was in den einzelnen Methoden / Funktionen vor sich geht, und Sie können die vollständigen Quelldateien am Ende überprüfen wie alles zusammenpasst.

Schritt 4 Das JavaScript

Jetzt kommt der lustige Teil. Im ersten Tutorial finden Sie unser drin() Die Methode war dafür verantwortlich, dass die Karte bei jedem Laden der Seite im gleichen Format instanziiert wurde. Dies bedeutet, dass jeder die gleiche Funktionalität unabhängig von den Gerätefunktionen erhalten würde - es ist Zeit, dies zu ändern!

Wenn ein Benutzer unsere Website beispielsweise über ein Smartphone besucht, möchten wir ihm die Möglichkeit bieten, seinen aktuellen Standort zu verwenden, anstatt ihn manuell einzugeben. Außerdem möchten wir die native Maps-Anwendung auf dem Telefon starten und die Route automatisch planen lassen.

Ein kurzes Wort zur Browser-Unterstützung

Die GeoLocation-JavaScript-API ist eine der am besten unterstützten neuen HTML5-Funktionen. Laut caniuse.com scheinen es über 75% aller Browser zu unterstützen. Ich denke das heißt, wir sind ziemlich sicher! (Wir werden ohnehin einen Rückfall für ältere Browser geben :))

Nun lasst uns in das JavaScript eintauchen.

Den Code verstehen

Einfach ausgedrückt, bieten wir hier lediglich die Option, Geo-Standort zu verwenden, sofern verfügbar. Ist dies nicht der Fall, können Benutzer die Adresse weiterhin manuell eingeben.

Wenn Sie einen Blick auf den vereinfachten Kontrollfluss (unten) werfen, können Sie feststellen, dass wir die gleichen Methoden zum Einrichten der Karte verwenden, ein paar weitere jedoch, wenn der geografische Standort aktiviert ist.

OK, ich denke, wir haben ein gutes Verständnis davon, was wir hier zu erreichen versuchen. Jetzt werde ich jede Methode einzeln erklären. Wie immer, lesen Sie bitte die Quelldateien, um zu sehen, wie alles in derselben Datei zusammenpasst.

Eigenschaften festlegen

Hier fragen wir das DOM ab, um einige Eigenschaften abzurufen, die wir später verwenden werden. Wir erhalten auch ein paar Objekte von der API, die die Anfrage 'Anweisungen abrufen' verarbeiten.

 var WPmap = // HTML-Elemente, die wir später verwenden werden! 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-direction '), nativeLinkElem: document.getElementById (' native-link '), startLatLng: null, Ziel: null , geoLocation: null, geoLat: null, geoLon: null, // Google Maps-API-Objekte dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / ** WPmap-Objekt wird während des gesamten Lernprogramms fortgesetzt ** /

`drin()`

Dies ist die erste Methode, die aufgerufen wird, wenn unsere Seite geladen wird.

Das erste, was wir tun, ist die Überprüfung von Geo-Standortfunktionen im Browser.
- Wenn verfügbar, führen wir einige weitere Methoden durch, um die zusätzlichen Schaltflächen auf der Seite einzurichten (wir werden diese in Kürze betrachten).
- Wenn es nicht verfügbar ist, überspringen wir das alles und machen uns gleich an die Einrichtung des Ziels
Der letzte Teil des drin() method ist der Ereignishandler, den wir verwenden, um dem Benutzer eine Nachricht anzuzeigen, wenn Anweisungen angefordert werden. Hinweis: Dies ist optional - Sie können es jederzeit entfernen.

 init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // was zu tun ist, wenn der Browser GeoLocation unterstützt. WPmap.getGeoCoords ();  WPmap.getDestination (); // Hören, wann Anweisungen angefordert werden google.maps.event.addListener (WPmap.dirRenderer, 'direction_changed', function () infoWindow.close (); // erste InfoWindow marker.setVisible (false); // schließen die ersten zu verwendenden Markierungs- / Setup-Zeichenfolgen var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // den Inhalt des infoWindow festlegen, bevor es erneut geöffnet wird. infoWindow. setContent ('Danke!
 Es sieht so aus, als ob es um dich geht  '+ distanceString +' weg von uns. 
Anweisungen sind knapp unter der Karte '); // Öffne das InfoWindow erneut. infoWindow.open (WPmap.map, Marker); setTimeout (function () infoWindow.close (), 8000); // nach 8 Sekunden schließen ); //drin

Ok, ich habe das gezeigt drin() Methode zum ersten Mal, damit Sie verstehen, wie der Kontrollfluss funktioniert.

Jetzt zeige ich Ihnen die Methoden, die ein Benutzer benötigt hat Geo-Standortfunktionen.

Geo-Standort ermitteln

`getGeo ()`

Alles beginnt mit der Standard-Funktionserkennung..

Um festzustellen, ob ein Browser GeoLocation unterstützt oder nicht, müssen wir lediglich prüfen, ob der Browser vorhanden ist navigator.geolocation Objekt.

 getGeo: function () if (!! navigator.geolocation) return navigator.geolocation; sonst Rückkehr undefiniert; ,

`getGeoCoords ()`

Nachdem wir wissen, dass der Browser geografische Position hat, können wir die aktuellen Koordinaten abfragen.

Wir nennen getCurrentPosition () und übergeben Sie zwei Parameter - eine Erfolgsrückruffunktion und eine Fehlerrückruffunktion

 getGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),

`setGeoCoords ()`

Dies ist unser Erfolgsrückruf. Wenn wir so weit kommen, haben wir erfolgreich die Koordinaten des Benutzers abgerufen.

Position ist ein Objekt, das die Geo-Standortinformationen enthält, sodass wir die Lat / Lon-Werte auf Objekteigenschaften setzen können.
Als nächstes rufen wir an showGeoButton () um die Schaltfläche für die Verwendung des aktuellen Standorts anzuzeigen.
Endlich rufen wir an setNativeMapLink () um den Link aufzubauen, der native Kartenanwendungen öffnet.

 setGeoCoords: Funktion (Position) WPmap.geoLat = Position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,

`geoError ()`

Dadurch werden alle Fehler behandelt, die von erhalten werden getCurrentPosition () - Dies ist sehr hilfreich in der Entwicklung, aber in der Produktion möchten Sie es vielleicht entfernen, da wir trotzdem auf die manuelle Adresseingabe zurückgreifen können.

 geoError: Funktion (Fehler) var message = ""; // Auf bekannte Fehler prüfen switch (error.code) case error.PERMISSION_DENIED: message = "Diese Website hat keine Berechtigung zur Verwendung der Geo-Location-API"; brechen; case error.POSITION_UNAVAILABLE: message = "Leider kann Ihre aktuelle Position nicht ermittelt werden. Geben Sie stattdessen Ihre Adresse ein."; brechen; case error.PERMISSION_DENIED_TIMEOUT: message = "Es tut uns leid, wir versuchen, Ihren aktuellen Standort zu ermitteln, geben Sie stattdessen Ihre Adresse ein."; brechen;  if (message == "") var strErrorCode = error.code.toString (); message = "Die Position konnte aufgrund eines unbekannten Fehlers nicht ermittelt werden (Code:" + strErrorCode + ").";  console.log (Nachricht); ,

`showGeoButton`

Schaltfläche "Aktuelle Position abrufen" anzeigen.

Unser Ansatz ist, die Schaltfläche immer auszublenden, es sei denn, JavaScript und Geo Location sind aktiviert. Wir erreichen dies, indem wir das entfernen .versteckt Klasse mit .removeClass (). Dies ist eine Hilfsmethode, die das Entfernen von Klassen in HTML-Elementen wesentlich vereinfacht (sie befindet sich am Ende der Quelldateien).

 showGeoButton: function () var geoContainer = document.getElementById ('geo-direction'); geoContainer.removeClass ('hidden'); ,

`setNativeMapLink ()`

Dies ist der spezielle Link, über den native Kartenanwendungen auf iOS- und Android-Geräten geöffnet werden. Da wir zuvor die aktuellen Lat / Lon-Werte in unserem Objekt gespeichert haben, können wir den Link jetzt problemlos im richtigen Format generieren.

 setNativeMapLink: function () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('In Google Maps öffnen'); ,

`getDestination ()`

Hier legen wir fest, ob der Administrator auf der Seite Optionen einen Lat / Lon-Wert oder eine reguläre Adresse eingegeben hat:

Wir testen zuerst, ob eingeben ist ein Lat / Lon-Wert unter Verwendung eines regulären Ausdrucks.
Wenn ja, dann setzen wir WPmap.destination gleich a google.maps.LatLng Objekt.
Wenn nicht, verwenden wir google.maps.Geocoder () um die Adresse in a umzuwandeln google.maps.LatLng Objekt und setzen Sie das als Ziel.
Wie auch immer, jetzt ist alles vorhanden, um die Karte mit einzurichten 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 ('address': WPmap.toInput.value, Funktion (Ergebnisse, Status) WPmap.destination = Ergebnisse [0] .geometry.location; WPmap.setupMap ();); ,

`setupMap ()`

Sehr ähnlich wie das Original - Richten Sie die Karte mit der Markierung auf unser Ziel und den Text aus den Admin-Optionen im InfoWindow ein.

 / * Initialisierung der Karte * / setupMap: function () // Abrufen des Inhalts 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)) // sorgt dafür, dass es als Integer-Zentrum durchgeht: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP; marker = new google.maps.Marker (map: WPmap.map, Position: WPmap.destination, ziehbar: false); // Setze den Infowindow-Inhalt infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, Markierung); ,

`Anweisungen bekommen()`

Dies wird aufgerufen, wenn Anweisungen angefordert werden. Sein einziges Argument "anfordern'hilft uns festzustellen, ob der Benutzer auf die Schaltfläche geklickt hat, um eine manuell eingegebene Adresse oder die "aktuelle Position" zu verwenden.

 getDirections: function (request) // Liefert die eingegebene Postleitzahl var fromStr = WPmap.fromInput.value; var dirRequest = origin: fromStr, Ziel: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // Überprüfen Sie, ob der Benutzer auf "aktuellen Standort" geklickt hat, wenn (request == "geo") var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng;  WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`showDirections ()`

Unverändert vom Original - übernimmt das Einfügen der Anweisungen in die Seite.

 / ** * Gib die Anweisungen auf der Seite aus. * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alert ('Leider können wir keine Adresse für diese Adresse angeben (Sie sind vielleicht zu weit weg, befinden Sie sich in demselben Land wie wir?) Bitte versuchen Sie es erneut. '); brechen; case "NOT_FOUND": alert ('Entschuldigung, dass wir die eingegebene Adresse nicht verstanden haben - Bitte versuchen Sie es erneut.'); brechen; default: alert ('Das Generieren der Anweisungen hat ein Problem verursacht. Bitte versuchen Sie es erneut.') return;  // Anweisungen anzeigen WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

Das JavaScript abschließen

Außerhalb des Objekts müssen Sie lediglich den Ereignis-Listener hinzufügen, der die Karte lädt, wenn die Seite fertig ist und die Hilfsfunktion, über die wir zuvor gesprochen haben.

 / * Lade die Karte, wenn die Seite fertig ist * / google.maps.event.addDomListener (Fenster, 'Laden', WPmap.init); / * Funktion zum einfachen Entfernen einer Klasse aus einem Element. * / HTMLElement.prototype.removeClass = Funktion (Entfernen) var newClassName = ""; var i; var classes = this.className.split (""); für (i = 0; i < classes.length; i++)  if(classes[i] !== remove)  newClassName += classes[i] + " ";   this.className = newClassName;

Und schlussendlich…

Jetzt, um alles zum Laufen zu bringen, müssen Sie nur noch die Karte Ordner in Ihr Design und führen Sie dann die Dinge durch, die wir im ersten Tutorial behandelt haben.

Umfassen map.php in deinem Motto Functions.php

 / ** In functions.php ** / include ('map / map.php');

Geben Sie Ihr Ziel, den Infowindow-Text und die Zoomstufe in die Felder ein, die wir in den Einstellungen erstellt haben. Sie finden sie unter Einstellungen -> Allgemein -> Kartenkonfiguration
Geben Sie dann auf einer beliebigen Seite oder in einem beliebigen Beitrag die drei Kurzwahlen ein
1. [wpmap_map]
2. [wpmap_directions_input]
3. [wpmap_directions_container]

Fazit

Wie ich schon erwähnt habe, ist dies ein aktualisieren zu diesem Tutorial und deshalb müssen Sie beide wirklich durchgehen, um den gesamten Prozess vollständig zu verstehen. Der einfachste Weg, um zu verstehen, wie alles zusammenpasst, wäre die Ansicht der bereitgestellten Quelldateien.

Nach all dem sollten Sie eine hübsche kleine Kartenanwendung haben, die auf unterschiedliche Bildschirmgrößen reagiert und Benutzern mit modernen Browsern zusätzliche Funktionen hinzufügt. Die ganze Zeit ein guter Rückschlag für alle anderen.

Code