suppressMarkers和可拖动的DirectionsRendererOptions Google Maps API

我正在使用Google Maps API创建具有给定点的方向。suppressMarkers和可拖动的DirectionsRendererOptions Google Maps API

我需要将点数定为1,2,3 ... 99（已完成）。

此外，点必须是可拖动的。

但是，当我做点拖动，方向不刷新自己，点的位置改变，但没有方向，

下面是示例代码（取自 - >Google Maps Directions using 1-2-3 instead of A-B-C）;

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("maps", "3",{other_params:"sensor=false"}); 

    function init(){ 
    directionsService = new google.maps.DirectionsService(); 

    var pos = new google.maps.LatLng(41.218624, -73.748358); 
    var myOptions = { 
     zoom: 15, 
     center: pos, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), myOptions); 
    directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true,draggable:true}); 

    directionsService.route({ 
     origin: "New York", 
     destination: "Chicago", 
     waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points 
     optimizeWaypoints: true, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function(response, status) { 
     if (status === google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      var my_route = response.routes[0]; 
      for (var i = 0; i < my_route.legs.length; i++) { 
       var marker = new google.maps.Marker({ 
        position: my_route.legs[i].start_location, 
        draggable:true, 
        label: ""+(i+1), 
        map: map 
       }); 
      } 
      var marker = new google.maps.Marker({ 
       position: my_route.legs[i-1].end_location, 
       draggable:true, 
       label: ""+(i+1), 
       map: map 
      }); 
     } else { 
      vts.alertDialog(window.localization.error, 
       window.localization.error_direction_calculate + ": " + status, 
       BootstrapDialog.TYPE_DANGER); 
     } 
    }); 

}  
</script> 
<body style="margin:0px; padding:0px;" onload="init()"> 
    <div id="map" style="height:400px; width:500px;"></div> 
</body>

这里是屏幕截图;

这是问题所在;

的事情是，我有两个标记和拖动属性来做到这一点。

在此先感谢

来源

2016-06-15 NewPHPer

我不能涉及ondrag当市场，我找不到任何API来做到这一点。你有什么想法吗？谢谢。 – NewPHPer

http://stackoverflow.com/questions/5688745/google-maps-v3-draggable-marker –

只要每次拖动标记时重新计算路径。监听dragend事件并再次计算路线，然后在地图上再次渲染，并再次抑制标记。请注意，如果您将标记拖动到某个无法计算路线的位置（例如，在海上或某些高山等地方），重新计算路线时会出现错误。

工作例如：

function init(){ 
 
    var markers = []; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var pos = new google.maps.LatLng(41.218624, -73.748358); 
 
    var myOptions = { 
 
     zoom: 15, 
 
     center: pos, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map'), myOptions); 
 
    directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true}); 
 

 
    directionsService.route({ 
 
     origin: "New York", 
 
     destination: "Chicago", 
 
     waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points 
 
     optimizeWaypoints: true, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
     if (status === google.maps.DirectionsStatus.OK) { 
 
      directionsDisplay.setDirections(response); 
 
\t \t \t var my_route = response.routes[0]; 
 
      for (var i = 0; i < my_route.legs.length; i++) { 
 
       addDraggableDirectionsMarker(my_route.legs[i].start_location, i+1, map, markers, directionsService, directionsDisplay); 
 
      } 
 
\t \t \t addDraggableDirectionsMarker(my_route.legs[i-1].end_location, i+1, map, markers, directionsService, directionsDisplay); 
 
     } else { 
 
      vts.alertDialog(window.localization.error, 
 
       window.localization.error_direction_calculate + ": " + status, 
 
       BootstrapDialog.TYPE_DANGER); 
 
     } 
 
    }); 
 

 
}  
 

 
function addDraggableDirectionsMarker(position, label, map, markers, directionsService, directionsDisplay){ 
 
    var marker = new google.maps.Marker({ 
 
     position: position, 
 
     label: "" + label, 
 
     map: map, 
 
\t \t draggable: true 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(){ 
 
     //do whatever you want on marker click 
 
    }); 
 
\t google.maps.event.addListener(marker, 'dragend', function(){ 
 
\t \t if(markers.length < 2) return; 
 
\t \t var waypoints = []; 
 
\t \t for(var i = 1; i < markers.length - 1; i++) waypoints.push({location:markers[i].getPosition()}); 
 
\t  directionsService.route({ 
 
\t   origin: markers[0].getPosition(), 
 
\t   destination: markers[markers.length-1].getPosition(), 
 
\t   waypoints: waypoints, 
 
\t   optimizeWaypoints: true, 
 
\t   travelMode: google.maps.TravelMode.DRIVING 
 
\t  }, function(response, status) { 
 
\t   if (status === google.maps.DirectionsStatus.OK) { 
 
\t    directionsDisplay.setDirections(response); 
 
        //uncomment following code if you want the markers you dragged to snap to the route, closest to the point where you dragged the marker 
 
        /*var my_route = response.routes[0]; 
 
      for (var i = 0; i < my_route.legs.length; i++) { 
 
\t   markers[i].setPosition(my_route.legs[i].start_location); 
 
      } 
 
      markers[i].setPosition(my_route.legs[i-1].end_location);*/ 
 
\t   } else { 
 
\t    vts.alertDialog(window.localization.error, 
 
\t     window.localization.error_direction_calculate + ": " + status, 
 
\t     BootstrapDialog.TYPE_DANGER); 
 
\t   } 
 
\t \t }); 
 
\t }); 
 
\t markers.push(marker); 
 
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
google.load("maps", "3",{other_params:"sensor=false"}); 
 
</script> 
 
<body style="margin:0px; padding:0px;" onload="init()"> 
 
\t <div id="map" style="height:400px; width:500px;"></div> 
 
</body>

来源

2016-06-15 09:41:29

如果您从街道（公园或建筑物中）拖出标记，路线将被重新计算，但标记将保留那里看起来有点奇怪...... – MrUpsidown

我编辑了代码，以包含将拖动的标记移动到最接近拖动位置的路线上的位置（将它们捕捉到路线）的代码片段。我已经离开它评论，因为它并不总是期望的行为。但感谢您的反馈。 –

suppressMarkers和可拖动的DirectionsRendererOptions Google Maps API

回答

相关问题