谷歌地图directionsRenderer使用折线错过航路点中的一些路线

Question

我正在使用Google Map API。我想在地图中显示虚线路线。如果我将polylineDotted对象添加到google.maps.DirectionsRenderer，它将错过地图上的某些路径。缺少A点和B点之间的路线（请查看我的jsfiddle）。

我曾尝试不使用polylineDotted，但没关系。

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

Example code

我希望的功能必须在：

1. 列表项
2. 颜色＃9966ff
3. 虚线路线
4. 多个航路点

Answer 1

polylineDotted应该是PolylineOptions个对象，而不是Polyline。

此：

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
})

应该是：

var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
};

proof of concept fiddle

代码段

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();

function initialize() {

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
  };

  var rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineDotted
  };

  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "Lafayette Avenue 212, New York City";
  var end = "Myrtle Avenue 11612, New York City";
  var method = 'DRIVING';
  var request = {
    origin: start,
    waypoints: [{
      location: "Jackie Robinson Pkwy Brooklyn, New York City",
      stopover: true
    }],
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
      infoWindow.setContent(iwContent);
    }
  });

  google.maps.event.addListener(polylineDotted, 'click', function(event) {

    infoWindow.setPosition(event.latLng);
    infoWindow.open(map, this);
  });

  google.maps.event.addListener(map, 'click', function() {

    infoWindow.close();
  });
}

initialize();

#map-canvas {
  height: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>