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

回答

相關問題