Question

这是我的来源和目的地提供的所有路线： image_1

这是选定的路线1（黑色）：image_2

这是选择的路线2（黑色）：image_3

现在，当我选择路线1，然后选择路线2，然后选择再次选择路线1，然后选择路线2，则发生这种情况：折线为不是全黑，她怎么了？：image_4

这是另一个错误，折线末端未完全填充：image_5

代码段：

var routes;
var polylines = [];
var indexSelected;

var map, directionsService;

var sourceLatLng = {lat: -3.0894037, lng: -59.9984166};
var destinationLatLng = {lat: -3.0944183, lng: -60.0231688};


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: sourceLatLng,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
streetViewControl: false,
mapTypeControl: false,
//zoom: 16
});
directionsService = new google.maps.DirectionsService();

var source = new google.maps.Marker({
position: sourceLatLng,
map: map,
title: 'source'
});

var destination = new google.maps.Marker({
position: destinationLatLng,
map: map,
title: 'destination'
});

getRoutes();
}

function getRoutes(){
var requestOptions = {
origin: sourceLatLng,
destination: destinationLatLng,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: true
};
directionsService.route(requestOptions, function(response, status) {

if (status == google.maps.DirectionsStatus.OK) {
routes = response.routes;
drawRoutes();
}else{
alert('error loading route request');
}
});
}

function drawRoutes(indexSelected = null) {
if(this.indexSelected  !== undefined && this.indexSelected == indexSelected){
return;
}	

var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'black'];

var bounds = new google.maps.LatLngBounds();
//clear map
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
polylines = [];

// Loop through each route
for (var i = 0; i < routes.length; i++) {
//draw own polilyne with event click
var color = colors[i];
if(indexSelected != null && i == indexSelected){
this.indexSelected = indexSelected;
continue;
}

var polylineOptions = {
strokeColor: color,
strokeWeight: 8
};
drawPolyline(routes[i], polylineOptions, listener, [i], polylines, bounds);
} // End route loop

if(indexSelected != null){
var polylineOptions = {
strokeColor: 'black',
strokeWeight: 8
};
drawPolyline(routes[indexSelected], polylineOptions, listener, [indexSelected], polylines, bounds);
}

//fitBounds
map.fitBounds(bounds);
}

function drawPolyline(route, polylineOptions, stepPolylineClickListener, stepPolylineClickListenerArguments, polylines = null, bounds = null){
for (i = 0; i < route.legs.length; i++) {
var steps = route.legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
var stepPolyline = new google.maps.Polyline(polylineOptions);
for (k = 0; k < nextSegment.length; k++) {
stepPolyline.getPath().push(nextSegment[k]);
if(bounds != null){
bounds.extend(nextSegment[k]);
}
}
if(polylines != null){
polylines.push(stepPolyline);
}
stepPolyline.setMap(map);
// route click listeners, different one on each step
google.maps.event.addListener(stepPolyline, 'click', function(event) {
with ({ newStepPolylineClickListener: stepPolylineClickListener }) {
newStepPolylineClickListener(event, this, stepPolylineClickListenerArguments);
}
});
}
}
}

function listener(event, stepPolyline, stepPolylineClickListenerArguments){
drawRoutes(stepPolylineClickListenerArguments[0]);
}

#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}

<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1IVBjnk9E0kNWxkqp8mbEbw6gpkV9Dhw&callback=initMap" async defer></script>
</body>
</html>

Answer 1

您需要将“选定的”多段线移到顶部（未选定的多段线上方）。

var polylineOptions = {
  strokeColor: color,
  strokeWeight: 8,
  zIndex: 1             // 1 is below 10
};

// snip  
if (indexSelected != null) {
  var polylineOptions = {
    strokeColor: 'black',
    strokeWeight: 8,
    zIndex: 10         // 10 is above 1
  };

更新的代码段：

var routes;
var polylines = [];
var indexSelected;

var map, directionsService;

var sourceLatLng = {
  lat: -3.0894037,
  lng: -59.9984166
};
var destinationLatLng = {
  lat: -3.0944183,
  lng: -60.0231688
};


function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: sourceLatLng,
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    streetViewControl: false,
    mapTypeControl: false,
    //zoom: 16
  });
  directionsService = new google.maps.DirectionsService();

  var source = new google.maps.Marker({
    position: sourceLatLng,
    map: map,
    title: 'source'
  });

  var destination = new google.maps.Marker({
    position: destinationLatLng,
    map: map,
    title: 'destination'
  });

  getRoutes();
}

function getRoutes() {
  var requestOptions = {
    origin: sourceLatLng,
    destination: destinationLatLng,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    provideRouteAlternatives: true
  };
  directionsService.route(requestOptions, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {
      routes = response.routes;
      drawRoutes();
    } else {
      alert('error loading route request');
    }
  });
}

function drawRoutes(indexSelected = null) {
  if (this.indexSelected !== undefined && this.indexSelected == indexSelected) {
    return;
  }

  var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'black'];

  var bounds = new google.maps.LatLngBounds();
  //clear map
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  polylines = [];

  // Loop through each route
  for (var i = 0; i < routes.length; i++) {
    //draw own polilyne with event click
    var color = colors[i];
    if (indexSelected != null && i == indexSelected) {
      this.indexSelected = indexSelected;
      continue;
    }

    var polylineOptions = {
      strokeColor: color,
      strokeWeight: 8,
      zIndex: 1
    };
    drawPolyline(routes[i], polylineOptions, listener, [i], polylines, bounds);
  } // End route loop

  if (indexSelected != null) {
    var polylineOptions = {
      strokeColor: 'black',
      strokeWeight: 8,
      zIndex: 10
    };
    drawPolyline(routes[indexSelected], polylineOptions, listener, [indexSelected], polylines, bounds);
  }

  //fitBounds
  map.fitBounds(bounds);
}

function drawPolyline(route, polylineOptions, stepPolylineClickListener, stepPolylineClickListenerArguments, polylines = null, bounds = null) {
  for (i = 0; i < route.legs.length; i++) {
    var steps = route.legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        if (bounds != null) {
          bounds.extend(nextSegment[k]);
        }
      }
      if (polylines != null) {
        polylines.push(stepPolyline);
      }
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(event) {
        with({
          newStepPolylineClickListener: stepPolylineClickListener
        }) {
          newStepPolylineClickListener(event, this, stepPolylineClickListenerArguments);
        }
      });
    }
  }
}

function listener(event, stepPolyline, stepPolylineClickListenerArguments) {
  drawRoutes(stepPolylineClickListenerArguments[0]);
}

html,
body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1IVBjnk9E0kNWxkqp8mbEbw6gpkV9Dhw&callback=initMap" async defer></script>
</body>

</html>

3重绘后折线清除错误

1 个答案: