Share
Ce tutoriel est une mise à jour d'un précédent dans lequel nous avons expliqué comment afficher des instructions de conduite directement sur un site Web WordPress à l'aide de l'API Google Maps..
Dans le premier tutoriel, nos utilisateurs devaient saisir manuellement leur adresse dans un formulaire sur le site Web - les instructions seraient ensuite affichées. C’était un bon exemple de l’utilisation de l’API de Google Maps, mais la possibilité de détecter les Localisation actuelle, en plus de pouvoir entrer une adresse manuellement, était une fonctionnalité souvent demandée.
Il y a beaucoup de chemin à parcourir ici, mais une grande partie a été abordée dans le didacticiel précédent. Pour éviter que je ne me répète, consultez le premier didacticiel "Donnez à vos clients des itinéraires routiers" où vous trouverez tout ce qui n’est pas expliqué dans celui-ci..
Ceci est une liste de choses que nous sommes ne pas va couvrir dans ce tutoriel. Alors n'hésitez pas à consulter le didacticiel original pour des explications détaillées:
Remarque: La lecture du premier tutoriel vous aidera à comprendre les parties qui ne sont pas expliquées dans ce tutoriel. Cependant, le code fourni dans le la source les fichiers contiennent tout ce dont vous avez besoin.
En plus de ce que nous avons réalisé dans le tutoriel précédent, nous allons également:
Autres améliorations à l'original:
Nous allons ajouter un minuscule un peu de CSS pour améliorer l'apparence / la présentation de notre carte et de nos boutons, nous allons donc créer une feuille de style CSS externe dans notre carte annuaire.
Dans votre dossier de thème, votre carte Le répertoire devrait maintenant ressembler à ceci:
Dans le premier tutoriel, nous avons ajouté quelques lignes de CSS dans la feuille de style principale du thème., style.css. Saisissez ces lignes et insérez-les dans ce nouveau fichier CSS avec tout ce que vous voyez ci-dessous.
Remarque: Ces styles ont été écrits pour fonctionner avec le thème de stock Twenty Eleven. Vous constaterez peut-être que le rembourrage, les marges ou les couleurs ne conviennent pas parfaitement à votre thème. Par conséquent, vous devriez vous sentir libre d'ajuster cela - cela n'affectera pas la fonctionnalité :)
# map-container img max-width: none; / * Extrait de l'original * / # map-container width: 100%; hauteur: 400px; / * À partir du texte original * / / * réduit la hauteur de la carte sur des écrans plus petits * / @média uniquement les écrans et (largeur maximale: 767px) # map-container height: 235px; / * Une classe que nous utiliserons pour cacher certains éléments plus tard * / .hidden display: none; / * Styles de boutons - modifier à volonté! * / .map-button display: block; rembourrage: 5px; arrière-plan: # d9edf7; bordure: 1px solide # bce8f1; couleur: # 3a87ad; marge: 5px 0; border-radius: 3px; texte-ombre: 1px 1px 1px blanc; .map-button: survol, .map-button: focus background: # b1dce5; texte-décoration: aucun; / * Annuler tout remplissage par défaut sur les éléments 'p' * / #directions p margin-bottom: 0; / * Ajuste l'affichage de l'élément d'entrée * / # from-input margin: 5px 0; border-radius: 3px; rembourrage: 5px;
Maintenant, vous pouvez aller de l'avant et mettre en file d'attente le fichier à l'intérieur du wpmap_map petit code.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style'); Ajoutons maintenant le balisage pour les boutons dans notre wpmap_directions_input petit code.
div et appliquer le 'caché'classe que nous avons définie dans notre CSS. Ensuite, nous pouvons supprimer cette classe plus tard si l'emplacement géographique est activé.WPmap.getDirections méthode ('Manuel' ou 'géo') - cela nous permet d'avoir la fonctionnalité d'origine (où un utilisateur entre une adresse manuellement) avec la nouvelle méthode de géolocalisation.envergure tag est l'endroit où nous allons insérer le lien spécial qui ouvrira l'application Carte sur les mobiles et les tablettes. La construction du lien nécessite un peu de travail, nous allons donc l'examiner de plus près dans la section JavaScript de ce tutoriel.. fonction wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Pour les itinéraires routiers, entrez votre adresse ci-dessous:
Obtenir des itinéraires routiers
Alternativement, vous pouvez
Utilisez votre position actuelle '; return $ output; Jusqu'ici, par rapport au tutoriel original, nous avons:
Ensuite, nous examinerons les modifications de JavaScript. Il y a beaucoup de choses dans cette section suivante, alors au lieu de faire une comparaison directe avec l'original, je vais simplement faire de mon mieux pour expliquer ce qui se passe dans chaque méthode / fonction et vous pouvez consulter l'intégralité des fichiers source à la fin pour voir. comment tout cela va ensemble.
Maintenant, voici la partie amusante. Dans le premier tutoriel, notre init () méthode était responsable de l’instanciation de la carte dans le même format pour chaque chargement de page. Cela signifiait que tout le monde recevrait exactement la même fonctionnalité, quelles que soient les capacités de l'appareil. Il est temps de changer cela.!
Lorsqu'un utilisateur visite notre site Web à l'aide d'un smartphone, par exemple, nous voulons pouvoir lui offrir la possibilité d'utiliser son emplacement actuel au lieu de le saisir manuellement. Nous souhaitons également pouvoir lancer l'application Maps native sur le téléphone et planifier automatiquement l'itinéraire..
L'API JavaScript de GeoLocation est l'une des nouvelles fonctionnalités HTML5 les mieux supportées. Selon caniuse.com, plus de 75% des navigateurs semblent le supporter. Je pense que cela signifie que nous sommes assez en sécurité! (Nous fournirons quand même une solution de rechange pour les anciens navigateurs :))
Maintenant, creusons dans le JavaScript.
En termes simples, tout ce que nous cherchons à faire ici est de fournir la possibilité d’utiliser la géolocalisation si elle est disponible. Si ce n'est pas le cas, les utilisateurs pourront toujours entrer une adresse manuellement.
Si vous regardez le flux de contrôle simplifié (ci-dessous), vous constaterez que nous utilisons les mêmes méthodes pour configurer la carte, mais quelques-unes de plus si la géolocalisation est activée..
OK, je pense que nous avons une bonne compréhension de ce que nous essayons d'accomplir ici. Je vais maintenant vous expliquer chaque méthode individuellement. Comme toujours, veuillez vous reporter aux fichiers source pour voir comment tout s'intègre dans le même fichier..
Ici, nous interrogeons le DOM pour récupérer certaines propriétés que nous utiliserons plus tard. Nous obtenons également quelques objets de l’API qui gèrent la requête 'get directions'.
var WPmap = // éléments HTML que nous utiliserons plus tard! 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-directions '), nativeLinkElem: document.getElementById (' native-link '), startLatLng: null, destination: null , geoLocation: null, geoLat: null, geoLon: null, // Objets de l'API Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / ** Objet WPmap continue tout au long du tutoriel ** / init ()C'est la première méthode qui sera appelée quand notre page sera chargée.
init () La méthode est le gestionnaire d'événements que nous utilisons pour afficher un message à l'utilisateur lorsque des instructions sont demandées.. Remarque: Ceci est facultatif - n'hésitez pas à l'enlever. init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // Que faire si le navigateur prend en charge la géolocalisation. WPmap.getGeoCoords (); WPmap.getDestination (); // écoute lorsque les instructions sont demandées google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // ferme le premier infoWindow marker.setVisible (false); // remove le premier marqueur // les chaînes de configuration à utiliser. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // définit le contenu de la fenêtre d'information avant de la rouvrir. setContent ('Merci!
On dirait que vous êtes sur le point '+ distanceString +' loin de nous.
Les directions sont juste en dessous de la carte '); // rouvre l'infoWindow infoWindow.open (WPmap.map, marqueur); setTimeout (function () infoWindow.close (), 8000); // le ferme après 8 secondes. ); // init Ok, j'ai montré le init () méthode d'abord cette fois afin que vous puissiez comprendre comment fonctionne le flux de contrôle.
Maintenant, je vais vous montrer les méthodes impliquées lorsqu'un utilisateur a capacités de géolocalisation.
getGeo ()Tout commence avec la «détection de fonctionnalité» standard.
Pour déterminer si un navigateur prend en charge la géolocalisation ou non, nous ne faisons que vérifier l’existence du navigator.geolocation objet.
getGeo: function () if (!! navigator.geolocation) renvoie navigator.geolocation; sinon, retourne non défini; ,
getGeoCoords ()Maintenant que nous savons que le navigateur a une géolocalisation, nous pouvons aller de l'avant et demander les coordonnées actuelles.
getCurrentPosition () et passez deux paramètres - une fonction de rappel de succès et une fonction de rappel d'erreurgetGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Ceci est notre rappel de succès. Si nous en arrivons là, nous avons récupéré avec succès les coordonnées de l'utilisateur.
position sera un objet contenant les informations de géolocalisation afin que nous puissions aller de l'avant et définir les valeurs Lat / Lon sur les propriétés de l'objet.showGeoButton () pour afficher le bouton permettant d'utiliser l'emplacement actuel.setNativeMapLink () construire le lien qui ouvrira des applications cartographiques natives.setGeoCoords: fonction (position) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
geoError ()Ceci gérera toutes les erreurs reçues de getCurrentPosition () - ceci est très utile en développement, mais en production, vous voudrez peut-être le supprimer car nous fournissons quand même un repli sur la saisie d'adresse manuelle.
geoError: function (error) var message = ""; // Vérifier les erreurs connues switch (error.code) case error.PERMISSION_DENIED: message = "Ce site Web n'a pas la permission d'utiliser l'API d'emplacement géographique"; Pause; case error.POSITION_UNAVAILABLE: message = "Désolé, votre position actuelle ne peut pas être déterminée, veuillez plutôt entrer votre adresse."; Pause; case error.PERMISSION_DENIED_TIMEOUT: message = "Désolé, nous ne parvenons pas à déterminer votre emplacement actuel. Veuillez plutôt entrer votre adresse."; Pause; if (message == "") var strErrorCode = error.code.toString (); message = "La position n'a pas pu être déterminée en raison d'une erreur inconnue (Code:" + strErrorCode + ")."; console.log (message); ,
showGeoButtonAfficher le bouton 'obtenir l'emplacement actuel'.
.caché classe utilisant .removeClass (). Il s'agit d'une méthode d'assistance qui simplifie considérablement la suppression de classes d'éléments HTML (ce sera au bas des fichiers sources). showGeoButton: function () var geoContainer = document.getElementById ('directions géographiques'); geoContainer.removeClass ('caché'); , setNativeMapLink ()C'est le lien spécial qui ouvrira les applications cartographiques natives sur les appareils iOS et Android. Comme nous avions précédemment enregistré les valeurs actuelles Lat / Lon dans notre objet, nous pouvons maintenant générer facilement le lien avec le format correct..
setNativeMapLink: function () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Ouvrir dans Google Maps'); , getDestination ()Nous déterminons ici si l'administrateur a saisi une valeur Lat / Lon ou une adresse normale dans la page Options:
saisir est une valeur Lat / Lon en utilisant une expression régulière.WPmap.destination égal à un google.maps.LatLng objet.google.maps.Geocoder () convertir l'adresse en un google.maps.LatLng objet et définir cela comme destination.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, fonction (résultats, statut) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Très similaire à l'original - configurez la carte avec le marqueur centré sur notre destination et le texte des options de l'administrateur dans la fenêtre d'information.
/ * Initialise la carte * / setupMap: function () // récupère le contenu 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), // s’assure qu’il passe par un centre entier: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); marker = new google.maps.Marker (map: WPmap.map, position: WPmap.destination, draggable: false); // définir le contenu de l'infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marqueur); , obtenir des directions()Ceci est appelé chaque fois que des instructions sont demandées. Son seul argument,demande', nous aidera à déterminer si l'utilisateur a cliqué sur le bouton pour utiliser une adresse saisie manuellement ou l'adresse "emplacement actuel".
getDirections: function (request) // Récupère le code postal saisi. var fromStr = WPmap.fromInput.value; var dirRequest = origine: fromStr, destination: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // vérifie si l'utilisateur a cliqué sur 'utiliser l'emplacement actuel' if (request == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Inchangé par rapport à l'original - il gère l'insertion des instructions dans la page.
/ ** * Affiche les instructions dans la page. * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alert ('Désolé, nous ne pouvons pas vous indiquer comment vous y rendre. (Vous êtes peut-être trop loin, êtes-vous dans le même pays que nous?) Veuillez réessayer. '); Pause; case "NOT_FOUND": alert ('Désolé, nous n'avons pas compris l'adresse que vous avez entrée - Veuillez réessayer.'); Pause; default: alert ('Désolé, un problème est survenu lors de la génération des directions. Veuillez réessayer.') return; // Afficher les directions WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , En dehors de l'objet, il n'y a que l'écouteur d'événement à ajouter qui chargera la carte lorsque la page sera prête et la fonction d'assistance dont nous avons parlé plus tôt..
/ * Charge la carte lorsque la page est prête * / google.maps.event.addDomListener (window, 'load', WPmap.init); / * Fonction permettant de supprimer facilement toute classe d'un élément. * / HTMLElement.prototype.removeClass = fonction (supprimer) var newClassName = ""; var i; var classes = this.className.split (""); pour (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Maintenant, pour que tout fonctionne, il vous suffit de mettre le carte dossier dans votre thème et ensuite parcourir les choses que nous avons couvertes dans le premier tutoriel.
Comprendre map.php dans votre thème functions.php
/ ** Dans functions.php ** / include ('map / map.php'); [wpmap_map][wpmap_directions_input][wpmap_directions_container]Comme je l'ai mentionné c'est un mettre à jour à ce tutoriel et vous devez donc vraiment les examiner tous les deux pour bien comprendre le processus. Peut-être le moyen le plus simple de comprendre comment tout cela fonctionne-t-il consiste à afficher les fichiers source fournis.
Après tout cela, vous devriez avoir une petite application de carte très soignée qui répondra à différentes tailles d'écran et ajoutera également des fonctionnalités supplémentaires aux utilisateurs avec des navigateurs modernes. Tout en offrant une bonne solution de repli à tous les autres.
