Как нарисовать линию между двумя точками в JavaScript - Google Maps Api Route

Question

У меня есть две точки на карте, я смог определить расстояние с помощью API, теперь мне нужно нарисовать линию между точками, чтобы пользователь мог видеть все пути. Я читал, что вам нужно использовать полилинию, но я, к сожалению, не могу. Я принимаю GPS-координаты пользователя как точку A - и на карте, в событии перетаскивания я беру координаты точки B. Вы можете увидеть пример на следующей странице: https://tojweb.tj/abb.php

Вы можете помочь?

Я читал, что вам нужно использовать полилинию, но я, к сожалению, не могу.

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);

Answer 1

Вот мой код. Первый закомментированный код не рисует и не выдает никаких ошибок. Второй код выдает ошибку: InvalidValueError: в индексе 0: не LatLng или LatLngLiteral с конечными координатами: в свойстве lat: NaN не допустимое значение

Я знаю, что я ошибаюсь, и я пишу свой кодв неправильном месте. Мне нужна помощь, чтобы показать, где ошибка и как ее исправить, чтобы я понял.

  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);