如何使用DirectionsRenderer中的setOptions更改选项

Question

我正在使用setOptions更改Google地图DirectionsRenderer中的选项。我只需使用draggable切换setOptions选项，但为了切换suppressPolylines和suppressMarkers并在地图上呈现它我需要额外的directionsDisplay.setMap(map);。

为什么呢？ （取消注释行//directionsDisplay.setMap(map);以查看此行为）

＆＃13;

＆＃13;

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;

var pointA = new google.maps.LatLng(51.5, 0.13);
var pointB = new google.maps.LatLng(60.17, 24.94);

function initialize() {

  var rendererOptions = {
      map: map,
      draggable: true
    }
    // Instantiate a directions service.
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  // Create a map and center it on pointA.
  var mapOptions = {
    center: pointA
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
  var request = {
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      console.log("something went wrong: " + status);
    }
  });
};

function changeOption(el) {
  var options = {};
  options[el.id] = el.checked;
  directionsDisplay.setOptions(options);
  // without the next line suppressPolylines and suppressMarkers are not updated
  //directionsDisplay.setMap(map);
};

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

#map {
  height: 280px;
  width: 50%;
}
section {
  width: 50%;
  float: left;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<section id="map"></section>
<section>

<input type="checkbox" id="suppressPolylines" onclick="changeOption(this)">suppressPolylines 
<p>
<input type="checkbox" id="draggable" onclick="changeOption(this)" checked>draggable
<p>
<input type="checkbox" id="suppressMarkers" onclick="changeOption(this)">suppressMarkers
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做：

directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setOptions({
    map: map,
    dragable: true
});