javascript

JavaScript: distancia entre 2 coordenadas

En el artículo de hoy te enseñaré a calcular la distancia en kilómetros que existe entre 2 puntos geográficos o 2 coordenadas, tomando las longitudes y latitudes.

Básicamente vamos a saber cuál es la medida que separa ambos puntos obtenidos con el GPS usando la fórmula de Haversine en JavaScript, y esto nos funcionará en el navegador así como en Node.js.

Con esto podríamos ordenar los lugares cercanos dependiendo de la ubicación del usuario, por ejemplo.

Convertir grados a radianes

Lo que tenemos que hacer es implementar la fórmula. Yo la voy a encerrar dentro de una función para que sea reutilizable.

Además de la función en sí, necesitaremos otra función que convierta grados a radianes. Comencemos viendo esa función:

const gradosARadianes = (grados) => {
    return grados * Math.PI / 180;
};

Básicamente es multiplicar los grados por Pi y luego dividir eso entre 180.

Eso es necesario porque las coordenadas están expresadas en grados y nosotros las necesitamos como radianes al usarlas con la fórmula de Haversine y calcular la distancia entre 2 puntos de la tierra con JavaScript.

La fórmula de Haversine – Calcular distancia entre 2 coordenadas con JS

Ahora que ya tenemos la conversión de grados a radianes veamos la fórmula que recibe ambas latitudes y longitudes:

const calcularDistanciaEntreDosCoordenadas = (lat1, lon1, lat2, lon2) => {
    // Convertir todas las coordenadas a radianes
    lat1 = gradosARadianes(lat1);
    lon1 = gradosARadianes(lon1);
    lat2 = gradosARadianes(lat2);
    lon2 = gradosARadianes(lon2);
    // Aplicar fórmula
    const RADIO_TIERRA_EN_KILOMETROS = 6371;
    let diferenciaEntreLongitudes = (lon2 - lon1);
    let diferenciaEntreLatitudes = (lat2 - lat1);
    let a = Math.pow(Math.sin(diferenciaEntreLatitudes / 2.0), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(diferenciaEntreLongitudes / 2.0), 2);
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return RADIO_TIERRA_EN_KILOMETROS * c;
};

Recuerda que la función devolverá la distancia entre 2 coordenadas expresada en kilómetros, y a partir de ello puedes convertirla a metros, pies, millas, etcétera.

Poniendo todo junto

Veamos un ejemplo para sacar la distancia entre la Ciudad de México y La Habana, lo hago de este modo porque en Google Maps se puede medir la distancia y obtener las coordenadas, así comprobamos que la función que calcula diferencia entre coordenadas con JavaScript funciona.

const calcularDistanciaEntreDosCoordenadas = (lat1, lon1, lat2, lon2) => {
    // Convertir todas las coordenadas a radianes
    lat1 = gradosARadianes(lat1);
    lon1 = gradosARadianes(lon1);
    lat2 = gradosARadianes(lat2);
    lon2 = gradosARadianes(lon2);
    // Aplicar fórmula
    const RADIO_TIERRA_EN_KILOMETROS = 6371;
    let diferenciaEntreLongitudes = (lon2 - lon1);
    let diferenciaEntreLatitudes = (lat2 - lat1);
    let a = Math.pow(Math.sin(diferenciaEntreLatitudes / 2.0), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(diferenciaEntreLongitudes / 2.0), 2);
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return RADIO_TIERRA_EN_KILOMETROS * c;
};

const gradosARadianes = (grados) => {
    return grados * Math.PI / 180;
};
//CDMX
//19.416326917410476, -99.12479042256915
const cdmx = {
    latitud: 19.416326917410476,
    longitud: -99.12479042256915,
};
// La habana
// 23.097069089850933, -82.35006433419622
const habana = {
    latitud: 23.097069089850933,
    longitud: -82.35006433419622,
};
const distanciaEnKilometros = calcularDistanciaEntreDosCoordenadas(cdmx.latitud, cdmx.longitud, habana.latitud, habana.longitud);
console.log(distanciaEnKilometros);

Al ejecutar el script (ya mencioné que también funciona en el navegador) aparece lo siguiente:

Distancia entre 2 coordenadas con JavaScript usando fórmula de Haversine

Como puedes ver, ambas mediciones coinciden. Así de sencillo es medir la distancia entre 2 coordenadas con JS.

Conclusión

A partir de esto ya podemos hacer varias cosas como indicar al usuario los lugares cercanos, usar OpenLayers para seleccionar 2 puntos y medir la distancia, mostrar la distancia en tiempo real y muchas cosas más.

Nota: esto calcula la distancia usando una línea recta (que no es recta porque la tierra no es plana, es por eso que se usa Haversine y no la que calcula la distancia entre 2 puntos de un plano) y no toma en cuenta las calles, montañas y cosas de esas.

Nota 2: esto ya lo hice con C y solo estoy portando la fórmula a JS.

Para terminar te dejo con más tutoriales de JavaScript en mi blog.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

6 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

6 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

6 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

6 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

6 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

7 días hace

Esta web usa cookies.