移动标记时重新绘制Google Maps API路线？

移动标记时重绘路线。
当标记移动时，填写新的customer位置的GPS值。

我终于得到了移动标记的工作，但它没有更新值或重新绘制路线。我错过了什么？

的HTML：

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

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

现场小提琴：https://jsfiddle.net/w1nae25n/2/

来源

2017-02-20 Mark M.

使用上拖动标记，并获得新的位置，并传递给该此事件Lat Long网新请求方向：

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

          });

来源

2017-02-20 07:10:16

移动标记时重新绘制Google Maps API路线？

回答

相关问题