Este artículo proviene de un motor de traducción automática.
Creación de aplicaciones HTML5
Integración de la geolocalización en las aplicaciones web
Descargar el ejemplo de código
Si tienes un smartphone, probablemente has usado una aplicación o funcionalidad integrada para llegar desde donde estás a donde quieres ir, o encontrar un cercano restaurante, hotel o estación de gas en algún pueblo desconocido.El término técnico para este servicio es la geolocalización, y describe una capacidad mediante el cual un dispositivo puede utilizar datos de ubicación externa (sistema de posicionamiento global [GPS], triangulación de torre celular y datos de Wi-Fi) para averiguar donde están y proporcionar esa información a la aplicación o servicio que soliciten estos datos.Su ubicación se expresa normalmente mediante datos como la latitud y longitud, partida, velocidad, dirección etc..Con esa información, un dispositivo puede proporcionar características tales como la navegación por giro o las ubicaciones de cerca camiones de taco que pasan a ser abierto en 2
Geolocalización es algo damos por sentado en nuestros dispositivos móviles, pero su uso se está extendiendo rápidamente más allá de las aplicaciones móviles nativas.Cada vez más portátiles y equipos móviles están ahora equipados con chips GPS y la explosión de la Web como una plataforma viable para el desarrollo de aplicaciones móviles ha provocado la demanda de servicios de geolocalización derecho dentro del navegador.
Por suerte para nosotros, el W3C recogidos en esta tendencia temprano y creado una especificación que describe una forma estándar para utilizar los servicios de geolocalización desde dentro de las aplicaciones Web.La especificación, que puede encontrar en bit.ly/3r737c, no está "oficialmente" de parte de HTML5, pero ya estoy usando ese término en esta serie para describir un conjunto de tecnologías Web de abrir — como lo hace el W3C — no podía faltar a la oportunidad de darle un breve recorrido por esta apasionante tecnología.
Artículo de este mes le dará una visión general de la API de geolocalización y mostrarle cómo usted puede comenzar utilizando, así como cómo manejar los tipos más comunes de errores que pueden producirse durante una solicitud de geolocalización.Voy a discutir cómo se implementa la geolocalización por exploradores móviles y de escritorio y concluir con un breve vistazo de cómo puede utilizar una biblioteca de polyfilling para proporcionar apoyo de geolocalización básica a los usuarios con navegadores antiguos.
Introducción a la geolocalización
Según la especificación del W3C, geolocalización es una "… API que proporciona acceso programado a la información de ubicación geográfica asociada con el dispositivo host." Porque la geolocalización es una API integrada, todo lo que necesita para empezar es un navegador que lo soporte.En el momento de este escrito, Internet Explorer 9 (incluido Internet Explorer 9 en Windows Phone 7.5, nombre clave "Mango"), así como las versiones actuales de Chrome, Firefox, Safari y Opera, todos admiten geolocalización, así que la especificación es no sólo ampliamente compatibles, pero probablemente disponible para un gran segmento de su base de usuarios.
La API de geolocalización vive el objeto global "navigator" en JavaScript (ventana.Navigator.geolocation).Proporciona dos formas de trabajar con servicios de localización: posición One-Shot peticiones y actualizaciones de posición repetida.Para solicitudes de One-Shot, utilice el método getCurrentPosition, así:
navigator.geolocation.getCurrentPosition(function(position) {
var coordinates = position.coords;
console.log("Your latitude: " + coordinates.latitude + " and longitude:
" + coordinates.longitude + " (Accuracy of:
" + coordinates.accuracy + " meters)");
}, errorHandler, { maximumAge: 100, timeout: 6000, enableHighAccuracy: true});
El getCurrentPosition método acepta tres parámetros. La primera es una función de devolución de llamada que se desencadena cuando el Explorador determina correctamente la ubicación actual de un dispositivo. La segunda es una función de devolución de llamada que se activa si se produce un error (más que en un momento). El tercero es un objeto literal para especificar opciones de geolocalización. Las opciones disponibles y los valores predeterminados se enumeran en figura 1.
Opciones de geolocalización figura 1
| Opción | Descripción | Valores |
| maximumAge | Período de tiempo (en milisegundos) en la memoria caché la ubicación ha informado. | 0 (predeterminado) a infinito |
| Tiempo de espera | Tiempo (en milisegundos) que esperar para que el servicio de ubicación responder. | 0 hasta el infinito (predeterminado) |
| enableHighAccuracy | Si el navegador debe intentar utilizar servicios de localización de alta precisión (por ejemplo, GPS), donde apoyado por el explorador y el dispositivo. | es true, false (valor predeterminado) |
El controlador de éxito proporciona un objeto de posición que contiene propiedades importantes relacionadas con la ubicación del usuario actual. La especificación de geolocalización define varias propiedades, pero sólo tres se aplican sistemáticamente en todos los navegadores: latitud, longitud y precisión. Otras propiedades, como título, dirección y altitud están disponibles para los navegadores implementar y podría ser muy útil para escenarios móviles de navegación en el futuro.
Para solicitudes de repetición de posición, el objeto de geolocalización ofrece dos métodos públicos, watchPosition y clearWatch; watchPosition puede utilizarse como este:
var watchId = navigator.geolocation.watchPosition(function(position) {
var coordinates = position.coords;
console.log("Your latitude: " + coordinates.latitude + " and longitude:
" + coordinates.longitude + " (Accuracy of:
" + coordinates.accuracy + " meters)");
}, errorHandler, {maximumAge: 100, timeout: 6000, enableHighAccuracy: true});
El método watchPostion toma los mismos parámetros como getCurrentPosition, con un controlador de éxito, controlador de errores y opciones. La diferencia clave es que watchposition inmediatamente devuelve un identificador que puede utilizarse para identificar la función en cuestión. Porque watchPosition es una función repetitiva, el navegador lo llamará cada vez que se detecta un cambio en la ubicación del usuario hasta que se cierra la ventana o el script cancele explícitamente el reloj. Para cancelar watchPosition, sólo tiene que llamar clearWatch con el identificador devuelto por watchPosition, así:
clearWatch(watchId);
Echemos un vistazo a utilizar getCurrentPosition en una aplicación de muestra. En este ejemplo, podrá seguir utilizando el WebMatrix (https://aka.ms/webm) muestra de panadería que utilicé en mi último artículo. El sitio es un lugar donde los usuarios pueden ordenar al horno bienes y les han entregado, pero quiero ampliar esta funcionalidad para permitir al usuario especificar una ubicación cercana de ladrillo y mortero donde podrá recoger el pedido. Lo que Best Buy ha hecho para su recogida en la tienda de electrónica, quiero hacerlo para la industria de productos horneados bulliciosa.
Empecé utilizando la aplicación de ejemplo de panadería modificada engalanada con características de formularios HTML5 en mi artículo de noviembre (msdn.microsoft.com/magazine/hh547102) y luego añadió una característica que permite al usuario seleccionar una panadería cercana para recoger haciendo clic en un vínculo en el formulario. Estoy utilizando el control de Bing Maps AJAX (que puede descargar en msdn.microsoft.com/library/gg427610), y después de agregar las referencias adecuadas y crear un elemento HTML para contener mi mapa, he añadido unos div de la página para representar las secciones del formulario de envío y la recogida. Cada div contiene un vínculo que permite al usuario alternar entre las dos opciones. Cuando se hace clic en el vínculo "Interesado en recoger su pedido en una de nuestras tiendas?", ejecuto una función en un archivo de JavaScript denominado locateBakery.js. Los métodos principales de esa función se muestran en figura 2.
Figura 2 locateBakery.js
var mapDiv = document.getElementById("map");
var _map = new Microsoft.Maps.Map(mapDiv, { credentials: myCredentials });
function hideMap() {
$('#pickup').hide();
$('#map').hide();
$('#ship').show();
}
function displayError(msg) {
$('#error').val(msg);
}
function placeLocationOnMap(latitude, longitude) {
var location = new Microsoft.Maps.Location(latitude, longitude);
var bakeries = lookupNearbyBakeries(latitude, longitude);
_map.setView({ zoom: 12, center: location });
// Add a pushpin to the map representing the current location
var pin = new Microsoft.Maps.Pushpin(location);
_map.entities.push(pin);
for (var i=0;i<bakeries.length;i++) {
_map.entities.push(bakeries[i]);
}
}
function errorHandler(e) {
if (e === 1) { // PERMISSION_DENIED
hideMap();
} else if (e === 2) { //POSITION_UNAVAILABLE
displayError('Cannot find your location.
Make sure your network
connection is active and click the link to try again.');
hideMap();
} else if (e === 3) { //TIMEOUT
displayError('Cannot find your location.
Click the link to try again.');
hideMap();
}
}
function locate() {
navigator.geolocation.getCurrentPosition(function (position) {
var coordinates = position.coords;
placeLocationOnMap(coordinates.latitude, coordinates.longitude);
}, errorHandler);
}
La función de localizar llamadas navigator.geolocation.getCurrentPosition y si la llamada se realiza correctamente, proporciona las coordenadas del lugarfunción LocationOnMap, que coloca la ubicación del usuario en un mapa junto con una lista de panaderías cercanas (la lógica de búsqueda de panadería fue omitida por espacio). Esto permite al usuario encontrar una panadería cercana desde la cual recoger su pedido. El resultado se muestra en figura 3.
.png)
Figura 3 utilizando geolocalización con la aplicación de panadería
Por supuesto, la geolocalización es un servicio dependiente de la red, ¿entonces qué hacer cuando falla la geolocalización? Quizá se notó que para las funciones de la getCurrentPosition y la watchPosition especifica un segundo parámetro denominado errorHandler. De acuerdo con la especificación de geolocalización, llamadas getCurrentPosition y watchPosition deben llamar a un controlador de éxito y un controlador de errores. Al llamar al servicio de geolocalización, hay tres posibles errores:
- El usuario podría rechazar solicitud del explorador para seguimiento de la información de ubicación
- La solicitud de ubicación podría timeout
- La solicitud de ubicación podría fallar antes de que expire el tiempo de espera
Al agregar soporte de geolocalización para su aplicación, debería asegurarse de manejar los tres casos. Un ejemplo de esto puede encontrarse en la fuente en figura 2, donde mostrará un mensaje de error y volver a la sección de información de envío cuando la llamada geolocalización falla por cualquier motivo.
Cómo funciona la geolocalización
Aunque la especificación de geolocalización es bastante prescriptiva en la definición de la API pública que cada navegador debe proporcionar a los desarrolladores, no tiene nada que decir sobre exactamente cómo geolocalización debe ser implementado en un navegador. La orientación general es que cada navegador debe intentar equilibrar precisión con consideraciones de consumo de energía, con el objetivo de proporcionar aplicaciones con un conjunto razonablemente exacta de coordenadas.
En un escenario de escritorio o portátil, la mayoría de los navegadores utilizan el mismo mecanismo para proporcionar datos de geolocalización, aunque difieren de los servicios de fondo que dependen. En el caso de Internet Explorer 9 y más tarde, el explorador recopilar su dirección IP o una lista de puntos de conexión Wi-Fi cercanas y luego pasar esa información al servicio de ubicación de Microsoft (las mismo servicio incorporado instalaciones sobre el uso de dispositivos de Windows Phone) para un conjunto de coordenadas. Google Chrome y el navegador Mozilla Firefox tanto también utilizan datos de punto de conexión IP y Wi-Fi, pero confían en el servicio de ubicación de Google para la solicitud actual. El método de servicio de ubicación para encontrar la ubicación del usuario sacrifica alguna precisión de velocidad (y bajo consumo de energía) y es muy útil como una copia de seguridad, o cuando el dispositivo carece de un chip GPS integrado.
Para los navegadores de móviles, la situación es un poco más compleja y nuevamente es hasta el navegador en cuestión. Porque los smartphones más modernos tienen chips de GPS, el navegador es libre para utilizar los servicios de localización GPS proporcionados por el sistema operativo móvil en un intento para obtener las coordenadas más precisas. En el caso de Internet Explorer 9 en Windows Phone 7.5 y Safari en iOS, es exactamente lo que hacen los navegadores. El resultado es una ubicación más precisa a expensas del consumo de energía adicional, que suele ser un equilibrio aceptable en escenarios de geolocalización más móviles, tales como navegación por giro. Es importante señalar, sin embargo, no está garantizado que un explorador móvil utilice geolocalización GPS basada simplemente porque existe un chip. Porque la especificación de hojas de aplicación hasta el navegador, el navegador o el servicio móvil de OS subyacente puede retroceder a la triangulación de torre de celda o búsqueda IP, o utilizar una combinación de triangulación celular y GPS. (Muchos sistemas operativos móviles ya hacen para aplicaciones nativas como parte de sus servicios de localización incorporado.)
Para que un desarrollador de aplicaciones Web, esto es una gran noticia, porque significa que con geolocalización, puede crear aplicaciones móviles multiplataforma que pueden contar con instalaciones de nativos de un dispositivo, tal como lo hacen los desarrolladores de aplicaciones nativas.
Detección y apoyo de geolocalización Polyfilling
Al agregar soporte de geolocalización para su aplicación, es necesario considerar cuál será su enfoque para aquellos usuarios que visitan su sitio con un navegador no compatible. Como he tratado en la serie ya, la forma de determinar si se admite la geolocalización en un explorador determinado es mediante la realización de detección de función manual ("if (! Navigator.geolocation) ") o usando una biblioteca como Modernizr (modernizr.com). Para los usuarios sin el apoyo de geolocalización, hay dos líneas de acción: degradar correctamente la aplicación o polyfill apoyo a través de una biblioteca externa. Para la primera opción, puede degradar la aplicación muestra un formulario que permite a los usuarios dar su ubicación, que posteriormente se puede utilizar (a través de una llamada de servicio) para determinar la latitud y la longitud de ese usuario. Había cubierto este escenario en mi artículo de septiembre de esta serie, para no repetirlo aquí. Puede ver ese escenario y el ejemplo de código en línea en (msdn.microsoft.com/magazine/hh394148).
Hablaré de la segunda opción en profundidad un poco más esta vez. Como he mencionado en artículos anteriores, cuando te encuentras en el mercado para un polyfill navegadores para una tecnología HTML5, el primer lugar para ir es hogar de Modernizr en GitHub, donde ha publicado una lista bastante exhaustiva de polyfills utilizable (bit.ly/eBMoLW). En el momento de escribir este artículo, hubo tres polyfills de geolocalización enumerados. Decidí usar uno suministrado por el irlandés Paul (bit.ly/q20TOl) puramente como un ejemplo para este artículo.
Te recuerdan de mi artículo de septiembre que un polyfill es una biblioteca que proporciona una implementación de secuencias de comandos para una función de HTML5, y a menudo se adhiere a la API documentada para dicha especificación en el proceso. Este último punto es clave, porque significa que una vez que dicha biblioteca he agregado a mi solicitud, puedo seguir interactuar con las capacidades de esa característica, como si se apoya en el navegador, y no tengo el flujo de mi programa con lógica condicional para apoyar un explorador antiguo de la horquilla.
Como lo he hecho antes de esta serie, estoy usando Modernizr que me ayude a detectar el soporte para la función de geolocalización y, si ese apoyo no existe, asincrónicamente cargar el archivo de secuencia de comandos de geolocationShim.js:
Modernizr.load({
test: Modernizr.geolocation,
nope: '../js/geolocationShim.js',
complete: function() {
locate();
}
});
Si se admite la geolocalización, ejecución seguirá la función de localizar. Si no es así, se cargará el polyfill geolocalización y, cuando haya terminado, ejecución continuará luego de la función de localizar. Cuando se ejecuta el ejemplo con esta lógica en Internet Explorer 9, todo funciona como debe y se llama la funcionalidad nativa de geolocalización.
Para probar esto como se ve en un explorador antiguo, puedo abrir las herramientas para desarrolladores F12 para Internet Explorer 9 y cambiar el modo de navegador a Internet Explorer 8. Al hacerlo y vuelven a ejecutar la página, Modernizr detectará geolocalización no es compatible y cargar mi cuña. Entonces, cuando getCurrentPosition en mi cuña se llama al método, el código figura 4 se ejecutará.
Figura 4 el getCurrentPosition método implementado mediante una cuña
geolocation.getCurrentPosition = function(callback){
if (cache) callback(cache);
$.getScript('//www.google.com/jsapi',function(){
cache = {
coords : {
"latitude": google.loader.ClientLocation.latitude,
"longitude": google.loader.ClientLocation.longitude
}
};
callback(cache);
});
};
Debido a esta biblioteca de polyfilling se adhiere a la especificación de la API de geolocalización y proporciona el getCurrentPosition y el relojmétodos de posición, no estoy obligado a implementar controles adicionales ni lógica condicional en mi función principal getLocation.
Si elige correctamente degradar su aplicación y permitir a los usuarios manualmente proporcionar su ubicación o pruebe la aplicación de una corrección, tienes opciones a la hora de adoptar la geolocalización en sus aplicaciones, mientras que asegurarse de que el sitio continúa proporcionando una gran experiencia para aquellos que aún no utilice un navegador moderno.
Mucho de lo que el mundo está llamando HTML5, o las tecnologías de Web abierta, es un conjunto de tecnologías orientadas hacia posibilitando el desarrollo aplicación real en la Web. La reducción de la brecha entre la Web y el escritorio, y geolocalización es un gran ejemplo de lo que hoy es posible con las aplicaciones Web. En este artículo, cubre los aspectos básicos de la especificación de geolocalización. Mostré cómo empezar, cómo geolocalización se implementa a través de los navegadores de escritorio y portátiles y cómo polyfill geolocalización de apoyo en los navegadores antiguos. Ahora es el momento para agregar esta característica emocionante para aplicaciones Web, así que van hacer hoy algunas aplicaciones impresionantes!
Si está buscando más información sobre la compatibilidad de geolocalización en Internet Explorer 9, revisa el Internet Explorer 9 Guía para desarrolladores de msdn.microsoft.com/ie/ff468705. Para otros navegadores polyfills de geolocalización, consulte la lista completa en bit.ly/qNE92g.
Finalmente, todos los demos para este artículo, que están disponibles en línea — fueron construidos con WebMatrix, una herramienta de desarrollo de Web ligera, libre de Microsoft. Puede probar WebMatrix para usted en aka.ms/webm.
Brandon Satrom funciona como un evangelista de desarrollador de Microsoft fuera de Austin. Blogs de él en userinexperience.com y puede encontrarse en Twitter en twitter.com/BrandonSatrom.
Gracias a los siguientes expertos técnicos para revisar este artículo: Cuadro de Jon, John Hrvatin, Clark Vendemos y Andy Zeigler