APIs populares de JavaScript

En esta lección, veremos el uso de la API de geolocalización de JavaScript. Y si quieres pensar en el impacto de esto, cualquier aplicación que use tu ubicación, móvil, computadora de escritorio o cualquier otra cosa, está utilizando esta API, de alguna forma. Así que voy a demostrar cómo podemos obtener nuestra ubicación, y luego usaremos Google Maps para que podamos mostrar lo que realmente podemos hacer con él. Y solo para comenzar a obtener nuestra ubicación, Voy a agregar un código que obtenga mi ubicación. cuando hago clic en el botón, y todo comienza a usar el objeto del navegador, que es el propio navegador, y el objeto de geolocalización que forma parte de él. Deberías estar bastante seguro que la mayoría de los navegadores modernos admite el objeto de geolocalización. Si no estas seguro puede usar una biblioteca de detección de características como Modernizer O algo por el estilo. Pero lo que queremos hacer es conseguir nuestra posición actual y los parámetros que toma este método son el nombre de la función que vamos a ejecutar si tiene éxito, y el nombre de la función que vamos a ejecutar si conseguir nuestra posición no tiene éxito. Ahora, lo que hace la API de geolocalización, ¿Se ejecuta a través de una serie de formas en las que tiene para encontrar su ubicación. Puede usar su dirección IP, podría utilizar su operador de telefonía móvil, podría hacer la triangulación del teléfono celular, cosas en ese sentido. La belleza de usar esto es que no tienes que saberlo ni preocuparte sobre el método que utiliza. Cuando tengamos la posición actual, buscamos una posición de pie. Hay otros métodos que podemos utilizar para observar nuestro progreso. Digamos que para una aplicación de GPS que le da indicaciones, queremos ver esa posición mientras te mueves. En este caso, solo vamos a mirar la posición en la que estoy, y voy a mostrar un pequeño medidor de progreso aquí. Entonces, completemos nuestras funciones, y decidiremos que vamos a hacer cuando pasa algo. Y la función de error es un poco más corta, Solo mostraré un pequeño indicador de progreso y te mostraré el mensaje y el código que viene con ese error. Entonces esas son solo propiedades que recuperamos de ese objeto de error que se pasa. Ahora, eventualmente voy a querer para dar la información de ubicación que encuentro cuando funciona a la API de Google Maps. Pero voy a empezar con solo mostrar la información que obtengo, así que estos son solo elementos en mi página. Y observe que estoy pasando en un objeto de posición aquí. La posición tiene un objeto de coordenadas con ella que va a contener nuestra ubicación. Me da latitud, longitud y precisión, ¿Qué tan cerca está en metros? Digamos que para una dirección IP, eso será más una estimación aproximada, mientras que digamos triangulación de la torre del teléfono celular va a ser más precisa. Dependiendo del tipo de lectura que obtengamos, también podemos obtener la altitud y la precisión de la altitud. Si estamos viendo la posición también podemos obtener la velocidad. Ahora, esto no se va a aplicar porque no hago esto mientras conduzco, Solo estoy sentado. Entonces esto obtendrá toda nuestra información. y lo mostraremos en la página, y tengo un par de otras variables que me quedaré aquí, porque doy esta información a la API de Google Maps más adelante. ¿Qué pasa de aquí en adelante? es que necesito tener una cuenta de desarrollador de Google Maps, y puedes buscar cómo hacerlo, pero para acceder a esto, Necesito tener este script incluido. Esta es la secuencia de comandos de la API de Google Map, y voy a poner mi clave de desarrollador aquí. Aunque no te lo voy a mostrar porque es mi llave y no me gusta compartir. Entonces puedes seguir las instrucciones y obtenga su propia clave aquí, y esto lo convierte en para poder usar la API de Google Maps más adelante. Y no he hecho mucho con este código. Esto es principalmente código repetitivo que puede obtener de la documentación de introducción en el sitio de Google. Algunas cosas importantes que quiero señalar. Tenemos un zoom en el mapa, va de uno a 15, así que estoy a punto de (indistinto), me mudé allí, y podemos crear nuestros propios marcadores personalizados. Tal vez hayas visto marcadores en mapas que tienen imágenes y enlaces, esos son relativamente sencillos de hacer. En este caso, solo voy a marcar esto con esta cosita que dice: "Estamos aquí". La función de inicialización aquí abajo simplemente dibuja el mapa inicialmente. El mapa va a aparecer en solo un div normal en la página, por lo que esto indica dónde se mostrará. Entonces lo que voy a hacer es tener otro botón llamado mostrar nueva ubicación, eso va a llamar a esto y denos un mapa de Google con nuestra ubicación una vez que se ejecute. Veamos cómo se ve nuestra página. y veremos si podemos averiguarlo donde en el mundo estamos realmente. En primer lugar, observe que tengo un diálogo. La geolocalización es una opción para el usuario, así que si bloqueo esto, entonces mi función solo obtendrá un error diciéndome que no puede encontrar lo que estaba buscando. Voy a seguir adelante y permitirlo. Ahí vamos, ahí está mi latitud y longitud. Ahora, la precisión estará muy lejos en este caso. Estoy usando una máquina virtual, tal vez eso haya afectado un poco a la API, así que son bastantes metros, pero obtuvimos una ubicación desde la que se está ejecutando. El resto de esto ahora Puedo hacer esto para mostrar mi ubicación en Google Map, y lo pinta aquí mismo en este lienzo. Ahora, está mi pequeño marcador que dice: "Estamos aquí". Estoy en algún lugar del área de California en este momento, y despues de esto, esta es solo una interfaz normal de Google Maps. Puedes hacer cualquier cosa con esto que haces en el sitio normal. En esta lección, analizamos cómo obtener nuestra ubicación y luego dar algunos pasos para hacer un uso práctico de esos datos de ubicación. Gracias por ver. En nuestra próxima lección, echaremos un vistazo al dibujo con la API Canvas.