拖动后Google地图折线无法正确显示

Question

我正在使用谷歌地图API，如果我使用默认折线，即使被拖动也一切正常。但我希望用户能够拥有多条路线（此时我想为它们涂上不同的颜色）。

var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
});

如果我使用自定义折线更改颜色，它会在开始时正确显示，但如果您拖动路线以创建新路线，折线会切断标记，并变得更不透明。

有人知道如何在拖动新方向后防止折线出现故障吗？

在被拖动之前：

（这是正确的）

被拖动后（显示线被切断且更不透明）：

澄清一下：在这两种情况下，路线仍然是Baker的Streator，路线的KM是正确的（包括拖曳后的绕道），只是在航路点切断线路。

工作副本我的意思是什么：http://jsfiddle.net/qmsjjbzw/ 点击提交按钮，然后拖动路线，看看我的意思。

代码段（来自链接小提琴）：

// declare map as a global variable
var map;

// use google maps api built-in mechanism to attach dom events
google.maps.event.addDomListener(window, "load", function() {

  // create map
  map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
  orig = "Streator, Il", dest = "Baker, Il";
  //fill out the request
  var request = {
    origin: orig,
    destination: dest,
    provideRouteAlternatives: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  //fill out the directionsservice
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      //render said directions
      renderResponse(response);

    } else alert("Unable to find route between \"" + orig +
      "\" and \"" + dest + "\".");
  });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
  var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
  });

  rend = new google.maps.DirectionsRenderer({
    zoom: 4,
    draggable: true,
    map: map,
    directions: response,
    polylineOptions: poly
  });

  rend.addListener('directions_changed', function() {
    //draggable event goes here
  });
}

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>
<button onclick="submitRoute()">Submit</button>

Answer 1

由于polylineOptions的{​​{1}}属性预期值为PolylineOptions类型且不属于google.maps.DirectionsRenderer类型，因此路径无法正常显示，所以你可以替换：

google.maps.Polyline

带

polylineOptions: poly

修改后的示例

polylineOptions: {
   strokeColor: '#FF0000',
   strokeOpacity: 0.6,
   strokeWeight: 6,
} 

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng(33.808678, -117.918921),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
    orig = "Streator, Il", dest = "Baker, Il";
    //fill out the request
    var request = {
        origin: orig,
        destination: dest,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    //fill out the directionsservice
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            //render said directions
            renderResponse(response);

        } else alert("Unable to find route between \"" + orig +
		"\" and \"" + dest + "\".");
    });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
    var poly = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 0.6,
        strokeWeight: 6,
    });
    poly.setDraggable(true);

    rend = new google.maps.DirectionsRenderer({
        zoom: 4,
        draggable: true,
        map: map,
        directions: response,
        //polylineOptions: poly
        polylineOptions: {
            strokeColor: '#FF0000',
            strokeOpacity: 0.6,
            strokeWeight: 6,
        }
    });


    rend.addListener('directions_changed', function (e) {
    });
}