¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?

Estrada Web Group
Administrador
¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?

¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?

Para medir la distancia entre dos puntos se utiliza una fórmula de distancia que deriva del teorema de Pitágoras. Para encontrar la distancia entre dos puntos (x1, y1) y (x2, y2), lo que requiere son las coordenadas de los dos puntos y aplicar la fórmula que se muestra a continuación.

Formula para obtener la distancia entre dos coordenadas de google maps. A continuación tienes el código del ejemplo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Calculate distance between two latitude longitude points google maps api</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLMa7emvhGQMK0uYYrS-9aymoEhlX-4sU"></script>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="utility.js"></script>

    <style type="text/css">
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 350px;
            width: auto;
        }
    </style>


    <script type="text/javascript">
        var map;
        var infoHandler;
        var DistanceBearingPolyline;
        var isDistanceFlag = false;
        var DistBearingPolylineClickHdl = 0;
        var DistBearingMapClickHdl = 0;
        var InfoWindowCloseClickHdl = 0;

        function initialize() {
            var mapOptions = {
                zoom: 11,                                    // Set Zoom Level
                center: new google.maps.LatLng(19.39812458609908, -99.1100109147653),     // Set the Latitude and longitude of the location
                mapTypeId: google.maps.MapTypeId.ROADMAP    // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
            };


            map = new google.maps.Map(document.getElementById('map-canvas'),      // Creating the map object to desplay
                mapOptions);

            /*Global mousemove event, developer has to manage the event while coding to use flags for different functionalities*/
            google.maps.event.addListener(map, 'mousemove', function (event) {
                // $('#divCoords').html(roundNumber(event.latLng.lat(), 5) + "," + roundNumber(event.latLng.lng(), 5));
                if (isDistanceFlag) {
                    if (DistanceBearingPolyline != null) {
                        var path = DistanceBearingPolyline.getPath();
                        var len = path.getLength();
                        $('#divLength').html("<span>Length: " + DistanceBearingPolyline.inKm() + " km</span>");
                        if (len == 1) {
                            path.push(event.latLng);
                        } else {
                            path.setAt(len - 1, event.latLng);
                        }
                    }
                }
            });
        }
    </script>

</head>
<body onload="initialize();">
    <form id="form1" runat="server">
        <h1>Google maps distance from location to location</h1>
        <a href="#" onclick="MeasureDistance();" style="font-family: Verdana; font-size: 14px;">Click here to measure distance</a>
        <br />
        <br />

        <div id="divLength">
            <span style="font-family: Verdana; font-size: 14px; color: red"><b>Distance: 0 km</b></span>
        </div>
        <br />

        <div id="map-canvas">
        </div>
    </form>
</body>
</html>

 

Compartir artículo:

Más artículos geniales

¿Cómo eliminar un elemento en un arreglo (array) en JavaScript?

¿Cómo eliminar un elemento en un arreglo (array) en JavaScript?

¿Cómo eliminar un elemento en un arreglo (array) en JavaScript? El método array.splice (indice) es una navaja suiza para los array. Puede hacer todo: insertar, eliminar y reemplazar elementos.

Ver artículo completo
¿Cómo utilizar las condiciones if else o estructuras de decisión en JavaScript? y ¿Qué es un if en JavaScript?

¿Cómo utilizar las condiciones if else o estructuras de decisión en JavaScript? y ¿Qué es un if en JavaScript?

La toma de decisiones en programación es similar a la toma de decisiones en la vida real. En programación también enfrentamos algunas situaciones en las que queremos que se ejecute un cierto bloque de código cuando se cumple alguna condición.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;