Share
Este tutorial es una actualización de una versión anterior en la que vimos cómo mostrar instrucciones de manejo directamente en un sitio web de WordPress utilizando la API de Google Maps.
En el primer tutorial, nuestros usuarios tuvieron que ingresar manualmente su dirección en un formulario en el sitio web, luego se mostrarían las instrucciones. Este fue un buen ejemplo de cómo usar la API de Google Maps pero la capacidad de detectar los usuarios. ubicación actual, Además de poder ingresar una dirección manualmente, se solicitó con frecuencia una función.
Hay mucho terreno que cubrir aquí, pero una gran parte de ella se cubrió en el tutorial anterior. Para evitar que tenga que repetirme, revise el primer tutorial "Proporcione a sus clientes instrucciones de manejo" donde encontrará todo lo que no se explica en este artículo..
Esta es una lista de cosas que somos. no Vamos a cubrir en este tutorial. Así que siéntase libre de revisar el tutorial original para explicaciones detalladas:
Nota: Leer el primer tutorial lo ayudará a comprender las partes que no se explican en este tutorial. Sin embargo, el código provisto en el fuente archivos contiene todo lo que necesitas.
Además de lo que hemos logrado en el tutorial anterior, también:
Otras mejoras al original:
Estaremos agregando un minúsculo poco de CSS para mejorar el aspecto / diseño de nuestro mapa y botones, por lo que crearemos una hoja de estilo CSS externa en nuestra mapa directorio.
Dentro de su carpeta de temas, su mapa El directorio ahora debería verse así:
En el primer tutorial, agregamos un par de líneas de CSS a la hoja de estilos principal del tema, style.css. Agarre esas líneas e insértelas en este nuevo archivo CSS junto con todo lo que ve a continuación..
Nota: Estos estilos fueron escritos para trabajar con el tema stock Twenty Eleven. Es posible que el relleno, los márgenes o los colores no se adapten perfectamente a su tema. Por lo tanto, debería sentirse libre de ajustar cualquiera de esto, no afectará la funcionalidad :)
# map-container img max-width: none; / * Del tut original * / # map-container width: 100%; altura: 400px; / * Del original tut * / / * reduce la altura del mapa en pantallas más pequeñas * / @media solo screen y (max-width: 767px) # map-container height: 235px; / * Una clase que usaremos para ocultar algunos elementos más adelante * / .hidden display: none; / * Estilos de botones - editar a voluntad! * / .map-button display: block; relleno: 5px; fondo: # d9edf7; borde: 1px sólido # bce8f1; color: # 3a87ad; margen: 5px 0; radio del borde: 3px; texto-sombra: 1px 1px 1px blanco; .map-button: hover, .map-button: focus background: # b1dce5; texto-decoración: ninguno; / * Cancele cualquier relleno predeterminado en los elementos 'p' * / #directions p margin-bottom: 0; / * Ajusta cómo se muestra el elemento de entrada * / # from-input margen: 5px 0; radio del borde: 3px; relleno: 5px;
Ahora puede seguir adelante y poner en cola el archivo dentro de la wpmap_map Código corto.
Accentsconagua
wp_register_style ('wptuts-style', get_template_directory_uri (). '/map/map.css', ",", false); wp_enqueue_style ('wptuts-style'); Ahora vamos a agregar el marcado para los botones en nuestro wpmap_directions_input Código corto.
div y aplicar el 'oculto'clase que definimos en nuestro CSS. Luego podemos eliminar esta clase más adelante si la ubicación geográfica está habilitada..WPmap.getDirections método ('manual'o'geo') - esto nos permite tener la funcionalidad original (donde un usuario ingresa una dirección manualmente) junto con el nuevo método de ubicación geográfica.lapso La etiqueta es donde insertaremos el enlace especial que abrirá la aplicación Mapa en móviles y tabletas. Se requiere un poco de trabajo para construir el enlace correctamente, por lo que lo veremos más adelante en la sección de JavaScript de este tutorial.. función wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Para instrucciones de manejo, ingrese su dirección a continuación:
Obtener direcciones de conducción
Alternativamente, puedes
Usa tu ubicación actual '; devuelve $ output; Hasta el momento, en relación con el tutorial original, tenemos:
A continuación, vamos a echar un vistazo a las modificaciones de JavaScript. Hay mucho en esta próxima sección, así que en lugar de hacer una comparación directa con el original, haré todo lo posible para explicar lo que está sucediendo en cada método / función y puede revisar los archivos de origen completos al final para ver cómo todo encaja.
Ahora viene la parte divertida. En el primer tutorial, nuestro en eso() El método fue responsable de crear una instancia del mapa en el mismo formato para cada carga de página. Esto significaba que todos recibirían exactamente la misma funcionalidad independientemente de las capacidades del dispositivo; es hora de cambiar eso!
Cuando un usuario visita nuestro sitio web con un teléfono inteligente, por ejemplo, queremos poder ofrecerle la posibilidad de utilizar su ubicación actual en lugar de ingresarla manualmente. Además, deseamos la posibilidad de iniciar la aplicación nativa de Mapas en el teléfono y hacer que la ruta se planifique automáticamente.
La API de JavaScript de GeoLocation es una de las funciones nuevas más compatibles de todas las llamadas HTML5. Más del 75% de todos los navegadores parecen admitirlo según caniuse.com. Creo que eso significa que estamos bastante seguros! (De todos modos, proporcionaremos un respaldo para los navegadores más antiguos :))
Ahora, vamos a profundizar en el JavaScript.
En pocas palabras, todo lo que buscamos hacer aquí es proporcionar la opción de usar la ubicación geográfica si está disponible. Si no es así, los usuarios podrán ingresar una dirección manualmente.
Si observa el flujo de control simplificado (a continuación), puede ver que usamos los mismos métodos para configurar el mapa, pero un par más si la ubicación geográfica está habilitada..
Bien, creo que entendemos bien lo que intentamos lograr aquí, así que ahora daré una explicación de cada método individualmente. Como siempre, consulte los archivos de origen para ver cómo todo encaja en el mismo archivo..
Aquí consultamos al DOM para recuperar algunas propiedades que usaremos más adelante. También obtenemos un par de objetos de la API que manejarán la solicitud 'obtener indicaciones'.
var WPmap = // Elementos HTML que usaremos más adelante! 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, // Objetos de la API de Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / ** WPmap Object continúa a lo largo del tutorial ** / en eso()Este es el primer método que se llamará cuando se cargue nuestra página.
en eso() El método es el controlador de eventos que utilizamos para mostrar un mensaje al usuario cuando se solicitan indicaciones.. Nota: Esto es opcional - siéntase libre de eliminarlo. init: function () if (WPmap.geoLoc = WPmap.getGeo ()) // cosas que hacer si el navegador admite GeoLocation. WPmap.getGeoCoords (); WPmap.getDestination (); // escuchar cuando se solicitan indicaciones google.maps.event.addListener (WPmap.dirRenderer, 'Directions_changed', function () infoWindow.close (); // cerrar el primer infoWindow marker.setVisible (false); // eliminar el primer marcador // las cadenas de configuración que se utilizarán. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // establezca el contenido de infoWindow antes de abrirlo de nuevo. infoWindow. setContent ('Gracias!
Parece que estás cerca '+ distanceString +' lejos de nosotros.
Las direcciones están justo debajo del mapa '); // vuelve a abrir infoWindow infoWindow.open (WPmap.map, marcador); setTimeout (function () infoWindow.close (), 8000); // Ciérralo después de 8 segundos. ); //en eso Ok, he mostrado el en eso() Método primero esta vez para que pueda comprender cómo funcionará el flujo de control.
Ahora te mostraré los métodos involucrados cuando un usuario tiene capacidades de ubicación geográfica.
getGeo ()Todo comienza con la 'detección de características' estándar.
Para determinar si un navegador es compatible con GeoLocation o no, todo lo que hacemos es verificar la existencia de Navegación. objeto.
getGeo: function () if (!! navigator.geolocation) return navigator.geolocation; de lo contrario volverá indefinido; ,
getGeoCoords ()Ahora que sabemos que el navegador tiene una ubicación geográfica, podemos seguir adelante y solicitar las coordenadas actuales..
getCurrentPosition () y pase dos parámetros: una función de devolución de llamada exitosa y una función de devolución de llamada de errorgetGeoCoords: function () WPmap.geoLoc.getCurrentPosition (WPmap.setGeoCoords, WPmap.geoError),
setGeoCoords ()Esta es nuestra devolución de llamada de éxito. Si llegamos tan lejos, hemos recuperado con éxito las coordenadas del usuario..
posición será un objeto que contenga la información de ubicación geográfica para que podamos seguir adelante y establecer los valores de Lat / Lon en las propiedades del objeto.showGeoButton () para mostrar el botón para usar la ubicación actual.setNativeMapLink () Para construir el enlace que abrirá las aplicaciones de mapas nativas..setGeoCoords: function (position) WPmap.geoLat = position.coords.latitude; WPmap.geoLon = position.coords.longitude; WPmap.showGeoButton (); WPmap.setNativeMapLink (); ,
GeoError ()Esto manejará cualquier error recibido de getCurrentPosition () - Esto es muy útil para el desarrollo, pero en producción es posible que desee eliminarlo, ya que de todos modos estamos proporcionando una alternativa a la entrada manual de direcciones..
geoError: function (error) var message = ""; // Verificar si hay errores conocidos cambiar (error.code) case error.PERMISSION_DENIED: message = "Este sitio web no tiene permiso para usar la API de ubicación geográfica"; descanso; error de caso.POSITION_UNAVAILABLE: message = "Lo sentimos, su posición actual no se puede determinar, ingrese su dirección en su lugar."; descanso; error de caso.PERMISIÓN_DENIED_TIMITA: mensaje = "Lo sentimos, tenemos problemas para determinar su ubicación actual, ingrese su dirección en su lugar."; descanso; if (mensaje == "") var strErrorCode = error.code.toString (); message = "La posición no se pudo determinar debido a un error desconocido (Código:" + strErrorCode + ")."; console.log (mensaje); ,
showGeoButtonMostrar el botón 'obtener ubicación actual'.
.oculto clase usando .removeClass (). Este es un método auxiliar que simplifica mucho la eliminación de clases en elementos HTML (estará en la parte inferior de los archivos de origen) showGeoButton: function () var geoContainer = document.getElementById ('geo-directions'); geoContainer.removeClass ('oculto'); , setNativeMapLink ()Este es el enlace especial que abrirá las aplicaciones de mapas nativas en dispositivos iOS y Android. Debido a que previamente guardamos los valores actuales de Lat / Lon en nuestro objeto, ahora podemos generar fácilmente el enlace con el formato correcto.
setNativeMapLink: function () var locString = WPmap.geoLat + ',' + WPmap.geoLon; var destination = WPmap.toInput.value; var newdest = destination.replace (","); WPmap.nativeLinkElem.innerHTML = ('Abrir en Google Maps'); , getDestination ()Aquí estamos determinando si el administrador ha ingresado un valor de Lat / Lon o una dirección regular en la página de Opciones:
para ingresar es un valor de Lat / Lon usando una expresión regular.WPmap.destination igual a un google.maps.LatLng objeto.google.maps.Geocoder () para convertir la dirección en una google.maps.LatLng objeto y establecer que como destino.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, function (results, status) WPmap.destination = results [0] .geometry.location; WPmap.setupMap ();); , setupMap ()Muy similar al original: configure el mapa con el marcador centrado en nuestro destino y el texto de las opciones de administración dentro de la ventana de información.
/ * Inicializar el mapa * / setupMap: function () // obtener el contenido 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), // asegúrese de que aparezca como un centro Integer: WPmap.destination, mapTypeId: google.maps.MapTypeId.ROADMAP); marker = new google.maps.Marker (map: WPmap.map, position: WPmap.destination, draggable: false); // configura el contenido de la ventana de información infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcador); , obtener las direcciones()Esto se llama siempre que se solicitan instrucciones. Su único argumento,solicitud', nos ayudará a determinar si el usuario hizo clic en el botón para usar una dirección ingresada manualmente o la' ubicación actual '.
getDirections: function (request) // Obtiene el código postal ingresado var fromStr = WPmap.fromInput.value; var dirRequest = origen: fromStr, destino: WPmap.destination, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); // compruebe si el usuario hizo clic en 'usar ubicación actual' si (solicitud == 'geo') var geoLatLng = new google.maps.LatLng (WPmap.geoLat, WPmap.geoLon); dirRequest.origin = geoLatLng; WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
showDirections ()Sin cambios respecto al original: maneja la inserción de las instrucciones en la página..
/ ** * Salida de las direcciones en la página. * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) switch (dirStatus) case "ZERO_RESULTS": alerta ('Lo sentimos, no podemos proporcionarle direcciones a esa dirección (quizás esté demasiado lejos, ¿está en el mismo país que nosotros?) Inténtelo de nuevo. '); descanso; caso "NOT_FOUND": alerta ('Lo sentimos, no entendimos la dirección que ingresó - Inténtelo de nuevo'); descanso; predeterminado: alerta ('Lo sentimos, hubo un problema al generar las instrucciones. Inténtalo de nuevo.') volver; // Mostrar direcciones WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , Fuera del objeto, solo se agrega el detector de eventos que cargará el mapa cuando la página esté lista y la función de ayuda que mencionamos anteriormente.
/ * Cargar el mapa cuando la página esté lista * / google.maps.event.addDomListener (window, 'load', WPmap.init); / * Función para eliminar fácilmente cualquier clase de un elemento. * / HTMLElement.prototype.removeClass = function (remove) var newClassName = ""; var i; var classes = this.className.split (""); para (i = 0; i < classes.length; i++) if(classes[i] !== remove) newClassName += classes[i] + " "; this.className = newClassName; Ahora para que todo funcione, solo necesitas poner el mapa carpeta en su tema y luego ejecute las cosas que cubrimos en el primer tutorial.
Incluir map.php en tus temas funciones.php
/ ** En functions.php ** / include ('map / map.php'); [wpmap_map][wpmap_directions_input][wpmap_directions_container]Como he mencionado esto es una actualizar a este tutorial y, por lo tanto, realmente necesita revisar ambos para comprender completamente todo el proceso. Sin embargo, la forma más fácil de entender cómo encaja todo esto sería ver los archivos fuente proporcionados, aunque.
Después de todo esto, deberías tener una aplicación de mapas bastante ordenada que responderá a diferentes tamaños de pantalla y también agregará funcionalidad adicional a los usuarios con navegadores modernos. Todo el tiempo proporcionando un buen respaldo para todos los demás..
