Cómo dibujar una línea entre dos puntos en JavaScript – Google Maps Api Route

9 minutos de lectura

Avatar de usuario de Ahmadjoni Muhamad
Ahmadjoni Muhamad

Tengo dos puntos en el mapa, pude tomar la distancia usando la API, ahora necesito dibujar una línea entre los puntos para que el usuario vea todo el camino. Leí que necesita usar la polilínea, pero lamentablemente no puedo. Tomo las coordenadas GPS del usuario como punto A – y en el mapa, en el evento de arrastre tomo las coordenadas del punto B. Puedes ver un ejemplo en la siguiente página: https://tojweb.tj/abb.php

¿Puede usted ayudar?

Leí que necesita usar la polilínea, pero lamentablemente no puedo.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
   console.log("Geolocation is not supported by this browser.");
}


function showPosition(position) {
    document.getElementById('mypos_lat').value=position.coords.latitude;
    document.getElementById('mypos_lon').value=position.coords.longitude;

  //alert("Latitude: " + position.coords.latitude +  "<br>Longitude: " + position.coords.longitude);
}

var darection = new google.maps.DirectionsRenderer;


      function initialize() {



    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(38.583958, 68.780528),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      gestureHandling: "greedy",
      fullscreenControl: false,
      disableDefaultUI: true,
      zoomControl: true,
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        darection.setMap(map);
        google.maps.event.addListener(map, 'dragend', function() { 
        var centeral = map.getCenter();
            //alert(centeral);


        var names = centeral.toString();
        var names =names.substr(1);
        names = names.substring(0, names.length - 1);

        console.log(names);

        var re = /\s*,\s*/;
        var nameList = names.split(re);
                document.getElementById('bpos_lat').value=nameList[0];
                document.getElementById('bpos_lon').value=nameList[1];

                source_a = document.getElementById("mypos_lat").value;
                source_b = document.getElementById("mypos_lon").value;

                source_d = document.getElementById("bpos_lat").value;
                source_e = document.getElementById("bpos_lon").value;

                var darection = new google.maps.DirectionsRenderer;
                var directionsService = new google.maps.DirectionsService;  


                //darection.setPanel(document.getElementById('panallocation'));

                source = source_a + "," + source_b;
                destination = source_d + "," + source_e;







                var request = {
                    origin: source,
                    destination: destination,
                    travelMode: google.maps.TravelMode.DRIVING,
                    //Показ алтернативных дорог 
                    provideRouteAlternatives: true 
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        darection.setDirections(response);
                    }
                });

                var service = new google.maps.DistanceMatrixService();
                service.getDistanceMatrix({
                    origins: [source],
                    destinations: [destination],
                    travelMode: google.maps.TravelMode.DRIVING,
                    unitSystem: google.maps.UnitSystem.METRIC,
                    avoidHighways: false,
                    avoidTolls: false
                }, function (response, status) {
                    if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                        var distance = response.rows[0].elements[0].distance.text;
                        var duration = response.rows[0].elements[0].duration.text;



                        distancefinel = distance.split(" ");
                        //start_addressfinel = start_address.split(" ");
                    //  $('#distance').val(distancefinel[0]);
                        console.log(distancefinel[0]);


                        document.getElementById("distancesa").value = distancefinel[0];


                        ////////// IN THIS STATE I WANT DRAW LINE ///////////////////


                    } else {
                        alert("Unable to find the distance between selected locations");
                    }
                });
            } 
        );
    $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
         //do something onclick
        .click(function(){
           var that=$(this);
           if(!that.data('win')){
            that.data('win',new google.maps.InfoWindow({content:'this is the center'}));
            that.data('win').bindTo('position',map,'center');
           }
           that.data('win').open(map);
        });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  • ¿Por qué crees que no puedes usar la polilínea? ¿Porque tienes coordenadas desde/hasta puntos?

    -Arthur Attout

    5 de noviembre de 2019 a las 7:01

  • Tengo coordenadas latlon de los puntos A y B, traté de buscar información de cómo se hace esto, usé códigos de diferentes fuentes, pero siempre me daba error. Pedí ayuda en el último momento. Ya que no puedo hacerlo yo mismo.

    – Ahmadjoni Muhamad

    5 de noviembre de 2019 a las 7:13

  • El hecho de que haya tenido un error no significa que no pueda usarlo, solo significa que lo ha estado usando mal. Edite su pregunta para reflejar lo que ha hecho y el error que tiene.

    -Arthur Attout

    5 de noviembre de 2019 a las 7:51

Puedes usar el Servicio de Direcciones de Google Maps JavaScript API para obtener las direcciones entre 2 puntos y pasar el resultado de las direcciones al DireccionesRendererque puede manejar automáticamente la visualización en el mapa.

Aquí está el código que hice que maneja el caso de uso (Geolocating Point A, Draggable Marker B, luego tener una ruta entre 2 puntos) de su descripción. También puedes comprobarlo aquí. ¡Espero que esto ayude!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map, infoWindow, markerA, markerB, drag_pos;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -34.397,
                    lng: 150.644
                },
                zoom: 6
            });
            markerA = new google.maps.Marker({
                map: map
            });
            markerB = new google.maps.Marker({
                map: map
            });
            infoWindow = new google.maps.InfoWindow;
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer1 = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true
            });
            var directionsRenderer2 = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true,
                polylineOptions: {
                    strokeColor: "gray"
                }
            });

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    map.setCenter(pos);
                    map.setZoom(15);
                    //Put markers on the place
                    infoWindow.setContent('Your Location');
                    markerA.setPosition(pos);
                    markerA.setVisible(true);
                    markerA.setLabel('A');
                    markerA.addListener('click', function() {
                        infoWindow.open(map, markerA);
                    });

                    //Get new lat long to put marker B 500m above Marker A
                    var earth = 6378.137, //radius of the earth in kilometer
                        pi = Math.PI,
                        m = (1 / ((2 * pi / 360) * earth)) / 1000; //1 meter in degree

                    var new_latitude = pos.lat + (500 * m);
                    var new_pos = {
                        lat: new_latitude,
                        lng: position.coords.longitude
                    };

                    markerB.setPosition(new_pos, );
                    markerB.setVisible(true);
                    markerB.setLabel('B');
                    markerB.setDraggable(true);

                    //Everytime MarkerB is drag Directions Service is use to get all the route
                    google.maps.event.addListener(markerB, 'dragend', function(evt) {
                        var drag_pos1 = {
                            lat: evt.latLng.lat(),
                            lng: evt.latLng.lng()
                        };

                        directionsService.route({
                                origin: pos,
                                destination: drag_pos1,
                                travelMode: 'DRIVING',
                                provideRouteAlternatives: true
                            },
                            function(response, status) {
                                if (status === 'OK') {

                                    for (var i = 0, len = response.routes.length; i < len; i++) {
                                        if (i === 0) {
                                            directionsRenderer1.setDirections(response);
                                            directionsRenderer1.setRouteIndex(i);

                                        } else {

                                            directionsRenderer2.setDirections(response);
                                            directionsRenderer2.setRouteIndex(i);
                                        }
                                    }
                                    console.log(response);
                                } else {
                                    window.alert('Directions request failed due to ' + status);
                                }
                            });
                    });
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }
    </script>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>

</html>

  • Gracias por la respuesta y por el tiempo que me dedique. ¿Puedo obtener la distancia y el tiempo de las carreteras y mostrarlas en div?

    – Ahmadjoni Muhamad

    21 de noviembre de 2019 a las 5:20


  • Puedes obtenerlo usando esto response.routes[i].legs[i].distance.text y esto response.routes[i].legs[i].duration.text . Aquí hay una modificación código que agrega estas funciones al código anterior.

    – Pagemag

    25 de noviembre de 2019 a las 7:54

  • Muchas gracias por su ayuda y apoyo. Ahora estoy empezando a entender cómo funciona. Gracias. ¿Puede decirme cómo puedo cambiar entre opciones de caminos alternativos?

    – Ahmadjoni Muhamad

    26 de noviembre de 2019 a las 6:58

Aquí está mi código. El primer código comentado no dibuja y no produce ningún error. El segundo código arroja un error: InvalidValueError: en el índice 0: no es un LatLng o LatLngLiteral con coordenadas finitas: en la propiedad lat: NaN no es un valor aceptado

Sé que estoy equivocado y estoy escribiendo mi código en el lugar equivocado. Necesito ayuda para mostrar dónde está el error y cómo solucionarlo para que lo entienda.

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
   console.log("Geolocation is not supported by this browser.");
  }


function showPosition(position) {
    document.getElementById('mypos_lat').value=position.coords.latitude;
    document.getElementById('mypos_lon').value=position.coords.longitude;

  //alert("Latitude: " + position.coords.latitude +  "<br>Longitude: " + position.coords.longitude);
}

var darection = new google.maps.DirectionsRenderer;











function initialize() {
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(38.583958, 68.780528),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    gestureHandling: "greedy",
    fullscreenControl: false,
    disableDefaultUI: true,
    zoomControl: true,
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
darection.setMap(map);
google.maps.event.addListener(map, 'dragend', function() { 
var centeral = map.getCenter();
//alert(centeral);


var names = centeral.toString();
var names =names.substr(1);
names = names.substring(0, names.length - 1);

console.log(names);

var re = /\s*,\s*/;
var nameList = names.split(re);

document.getElementById('bpos_lat').value=nameList[0];
document.getElementById('bpos_lon').value=nameList[1];

source_a = document.getElementById("mypos_lat").value;
source_b = document.getElementById("mypos_lon").value;

source_d = document.getElementById("bpos_lat").value;
source_e = document.getElementById("bpos_lon").value;

var darection = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;  


//darection.setPanel(document.getElementById('panallocation'));

source = source_a + "," + source_b;
destination = source_d + "," + source_e;


var request = {
    origin: source,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    //Показ алтернативных дорог 
    provideRouteAlternatives: true 
};
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        darection.setDirections(response);
                    }
                });

                var service = new google.maps.DistanceMatrixService();
                service.getDistanceMatrix({
                    origins: [source],
                    destinations: [destination],
                    travelMode: google.maps.TravelMode.DRIVING,
                    unitSystem: google.maps.UnitSystem.METRIC,
                    avoidHighways: false,
                    avoidTolls: false
                }, function (response, status) {
                    if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                        var distance = response.rows[0].elements[0].distance.text;
                        var duration = response.rows[0].elements[0].duration.text;



                        distancefinel = distance.split(" ");
                        //start_addressfinel = start_address.split(" ");
                    //  $('#distance').val(distancefinel[0]);
                        console.log(distancefinel[0]);


                        document.getElementById("distancesa").value = distancefinel[0];


                        ////////// IN THIS STATE I WANT DRAW LINE ///////////////////

                        /*

                        function poliLines(map, source_a, source_b, source_d, source_e){

                        var routes = [
                          new google.maps.LatLng(source_a, source_b)
                          ,new google.maps.LatLng(source_d, source_e)
                        ];

                        var polyline = new google.maps.Polyline({
                           path: routes
                           , map: map
                           , strokeColor: '#ff0000'
                           , strokeWeight: 5
                           , strokeOpacity: 0.5
                           , clickable: false
                       });
                */




                console.log(source);

                console.log(destination);

                var flightPlanCoordinates = [new google.maps.LatLng(source), new google.maps.LatLng(destination) ];
                var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });

                flightPath.setMap(map);







                    } else {
                        alert("Unable to find the distance between selected locations");
                    }
                });
            } 
        );




    $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
         //do something onclick
        .click(function(){
           var that=$(this);
           if(!that.data('win')){
            that.data('win',new google.maps.InfoWindow({content:'this is the center'}));
            that.data('win').bindTo('position',map,'center');
           }
           that.data('win').open(map);
        });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  • @Arthur Attout ¿Puedes ayudar?

    – Ahmadjoni Muhamad

    5 de noviembre de 2019 a las 8:51

  • @ ArthurAttout ¿No tienes comentarios?

    – Ahmadjoni Muhamad

    5 de noviembre de 2019 a las 12:22

¿Ha sido útil esta solución?