设置draggable = true时,为什么不能拖动路线?

时间:2015-05-21 05:15:03

标签: javascript google-maps

我认为这是一个非常简单的问题。但我没有找到原因。

我的代码是这样的:



var request = {
  origin: new google.maps.LatLng(startLat, startLng),
  destination: new google.maps.LatLng(targetLat, targetLng),
  waypoints: stopovers,
  travelMode: google.maps.DirectionsTravelMode.DRIVING,
  provideRouteAlternatives: true
};



directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var rendererOptions = {
      map: map,
      suppressMarkers: true,
      draggable: true
    }
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setOptions({
      polylineOptions: {
        strokeColor: colors[i]
      }
    });

    directionsDisplay.setDirections(response);

  } else
    console.log("error " + status);
});




当路线显示在地图上时,我可以找到"点"用于拖动路线。

但是,如果我真的拖动路线,在释放鼠标按钮后,路线将恢复到原来的状态。

有没有人有类似的问题?

1 个答案:

答案 0 :(得分:0)

您可能在代码中使用waypoints: stopovers,时遇到问题,请参阅https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests。如果我们有一个小提琴,我们就可以解决这个问题,但在此之前,请查看我为您创建的fiddle以及从this article获取的文章代码,这些代码似乎定义了rendererOptions在更高的层次:

var map;
var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();

$(document).ready(function () {
        //draw a map centered at Empire State Building Newyork
        var latlng = new google.maps.LatLng(40.748492, -73.985496);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("divDirections"));

        $("#btnGetDirections").click(function(){
            calcRoute($("#txtAddress1").val(),$("#txtAddress2").val());
        });  

});

function calcRoute(start,end) {
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives : false
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}