标记移动时是否重新绘制Google Maps API方向？

Question

I am trying to do 2 things:

• Redraw the route when a marker is moved.
• Fill in the GPS value of the new customer position when the marker is moved.

I finally got the movable marker working, but it's not updating the value or re-drawing the route. What am I missing?

The HTML:

<div id="map_canvas" style="width:500px;height:380px;"></div>
<br>
<input type="text" class="form-control" id="customer_location" value="" readonly="true">

The JS:

        var directionDisplay;
                var directionsService = new google.maps.DirectionsService();
                var map;

                function initialize_create_task_map() {
                    directionsDisplay = new google.maps.DirectionsRenderer({
                          suppressMarkers: true
                      });
                    var newyork = new google.maps.LatLng(40.621757, -73.984927);
                    var myOptions = {
                        zoom:14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        center: newyork
                    }

                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    directionsDisplay.setMap(map);


                    printRoute();

                }

                function printRoute() {

            var distanceInput = document.getElementById("distance");
                    var restaurant = "40.679666, -73.964425";
                    var customer = "40.615758, -74.007652";

                    var locations = [
                                ['Restaurant', 40.679666, -73.964425,'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
                                ['Customer', 40.615758, -74.007652,'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png']
                            ];

                    var request = {
                        origin:restaurant, 
                        destination:customer,
                        waypoints: [],
                        travelMode: google.maps.DirectionsTravelMode.WALKING
                    };
                    console.log("Preparing marker...");
                    //add marker to each locations
                            for (i = 0; i < locations.length; i++) {
                            console.log("Adding marker...");
                                marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                                map: map,
                                                draggable:true,
                                                icon: locations[i][3]
                                });

                                google.maps.event.addListener(marker, 'dragend', function() 
                                {
                            distanceInput.value = marker.getPosition();
                                });

                            }

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }

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

Live fiddle: https://jsfiddle.net/w1nae25n/2/

Answer 1

Use this event on dragging marker and get new position and pass to this lat long to new request for directions:

 google.maps.event.addListener(marker, 'dragend', function (event) 
                            {
                       // distanceInput.value = marker.getPosition();
                       console.log(this.getPosition().lat());
                       console.log(this.getPosition().lng());

                            });