Google Map directionsRenderer using polyline miss some routes in waypoints [duplicate]

问题

I'm using the Google Map API. I want to show the dotted routes in map. If I add polylineDotted object to google.maps.DirectionsRenderer, it will miss some path on the map. Between point A and point B route is missing(please check my jsfiddle).

I had tried not using polylineDotted, it will be OK.

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

Example code

My wish features must in could:

List item
Color #9966ff
Dotted routes
Multiple waypoints

回答1:

polylineDotted should be a PolylineOptions object, not a Polyline.

This:

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

should be:

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

proof of concept fiddle

code snippet:

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>

来源：https://stackoverflow.com/questions/47750420/google-map-directionsrenderer-using-polyline-miss-some-routes-in-waypoints

标签

javascript

google-maps

google-maps-api-3