websockets w3schools run localstorage examples event javascript jquery html5 geolocation

javascript - w3schools - Geolocalización ubicación más cercana(lat, long) desde mi posición



sse html 5 (3)

Quiero mostrar información específica dependiendo de donde estoy.

Tengo cinco ciudades con información diferente y quiero mostrar la ciudad (información) a la que estoy más cerca.

Cómo hacerlo de la manera más sencilla, utilizando javascript.

Ex.

Si almaceno las ciudades lat, long en un array

var cities = [ [''new york'', ''111111'', ''222222'', ''blablabla''] [''boston'', ''111111'', ''222222'', ''blablabla''] [''seattle'', ''111111'', ''222222'', ''blablabla''] [''london'', ''111111'', ''222222'', ''blablabla''] ]

Y con mi ubicación actual (lat, long) quiero la ciudad en la que estoy más cerca.


Con HTML5, puede extraer la ubicación del usuario y luego comparar este ejemplo utilizando una función de Haversine ( función que se muestra a continuación ):

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) { var R = 6371; // Radius of the earth in km var dLat = deg2rad(lat2-lat1); // deg2rad below var dLon = deg2rad(lon2-lon1); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2) ; var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; // Distance in km return d; } function deg2rad(deg) { return deg * (Math.PI/180) }


Este es un ejemplo de código básico que utiliza la geolocalización HTML5 para obtener la posición del usuario. Luego llama a NearestCity() y calcula la distancia (km) desde la ubicación a cada ciudad. Pasé a usar las fórmulas de Haversine y en su lugar usé las fórmulas de Pitágoras más simples y una proyección equirectangular para ajustar la curvatura en las líneas de longitud.

// Get User''s Coordinate from their Browser window.onload = function() { // HTML5/W3C Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(UserLocation); } // Default to Washington, DC else NearestCity(38.8951, -77.0367); } // Callback function for asynchronous call to HTML5 geolocation function UserLocation(position) { NearestCity(position.coords.latitude, position.coords.longitude); } // Convert Degress to Radians function Deg2Rad(deg) { return deg * Math.PI / 180; } function PythagorasEquirectangular(lat1, lon1, lat2, lon2) { lat1 = Deg2Rad(lat1); lat2 = Deg2Rad(lat2); lon1 = Deg2Rad(lon1); lon2 = Deg2Rad(lon2); var R = 6371; // km var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2); var y = (lat2 - lat1); var d = Math.sqrt(x * x + y * y) * R; return d; } var lat = 20; // user''s latitude var lon = 40; // user''s longitude var cities = [ ["city1", 10, 50, "blah"], ["city2", 40, 60, "blah"], ["city3", 25, 10, "blah"], ["city4", 5, 80, "blah"] ]; function NearestCity(latitude, longitude) { var mindif = 99999; var closest; for (index = 0; index < cities.length; ++index) { var dif = PythagorasEquirectangular(latitude, longitude, cities[index][1], cities[index][2]); if (dif < mindif) { closest = index; mindif = dif; } } // echo the nearest city alert(cities[closest]); }