谷歌地图删除以前的路线并绘制新路线

Question

目前我遇到了一个问题。我使用并更改了样本API来绘制两点的路线。 A点是当前位置。 B点是多个标记的位置之一。创建了那些我称之为附近搜索功能的标记。

function showInfoWindow() {
    var marker = this;
    places.getDetails({
            placeId: marker.placeResult.place_id
        },
        function(place, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                return;
            }
            infoWindow.open(map, marker);
            buildIWContent(place);
        });
    var clickLat = marker.position.lat();
    var clickLon = marker.position.lng();
    var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map
    });
    var directionsService = new google.maps.DirectionsService();
    showRoute(clickLat, clickLon, directionsDisplay, directionsService);
}

function showRoute(clickLat, clickLon, directionsDisplay, directionsService) {
    var pointA = {
        lat: currentLat,
        lng: currentLon
    };
    var pointB = {
        lat: clickLat,
        lng: clickLon
    };


    directionsDisplay.setOptions({
        suppressMarkers: true
    });

    //directionsDisplay.setMap(map);
    //directionsDisplay.setDirections({ routes: [] });
    // Set destination, origin and travel mode.
    var request = {
        destination: pointB,
        origin: pointA,
        travelMode: google.maps.TravelMode.DRIVING
    };
    //directionsDisplay.setMap(null);
    // Pass the directions request to the directions service.  
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            // Display the route on the map.
            //directionsDisplay.set('directions', null);

            //directionsDisplay.setMap(map);
            //directionsDisplay.setDirections({ routes: [] });
            directionsDisplay.setDirections(response);

        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });

}

这些代码已经可以绘制两点的路线。但问题是，当我单击一个标记调用showInfoWindow（）时，它将绘制一个路径，并在它再次调用showInfoWindow（）时单击另一个路径，它将绘制剩余前一个路由的另一个路径。我想清除之前的路径一条路线。在网上尝试了所有的方法，找不到原因。

Answer 1

如果您只想在地图上显示一个路线结果，则只需创建并使用DirectionsRenderer的一个实例，目前您为DirectionsService的每个结果创建一个新实例。< / p>

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var geocoder;
var map;
var places;
var infoWindow = new google.maps.InfoWindow();
//Jersey City, NJ, USA
var currentLat = 40.7281575;
var currentLon = -74.0776417;
// global reference to the DirectionsRenderer
var directionsDisplay;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  places = new google.maps.places.PlacesService(map);
  // initialize the global DirectionsRenderer
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var marker1 = new google.maps.Marker({ /* New York, NY, USA */
    position: {
      lat: 40.7127837,
      lng: -74.0059413
    },
    placeResult: {
      place_id: "ChIJOwg_06VPwokRYv534QaPC8g"
    },
    map: map
  });
  google.maps.event.addListener(marker1, 'click', showInfoWindow);
  var marker2 = new google.maps.Marker({ /* Newark, NJ, USA */
    position: {
      lat: 40.735657,
      lng: -74.1723667
    },
    placeResult: {
      place_id: "ChIJHQ6aMnBTwokRc-T-3CrcvOE"
    },
    map: map
  });
  google.maps.event.addListener(marker2, 'click', showInfoWindow);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.getPosition());
  bounds.extend(marker2.getPosition());
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

function showInfoWindow() {
  var marker = this;
  places.getDetails({
      placeId: marker.placeResult.place_id
    },

    function(place, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        return;
      }
      infoWindow.open(map, marker);
      buildIWContent(place);
    });
  var clickLat = marker.position.lat();
  var clickLon = marker.position.lng();
  var directionsService = new google.maps.DirectionsService();
  showRoute(clickLat, clickLon, directionsDisplay, directionsService);
}

function showRoute(clickLat, clickLon, directionsDisplay, directionsService) {
  var pointA = {
    lat: currentLat,
    lng: currentLon
  };
  var pointB = {
    lat: clickLat,
    lng: clickLon
  };


  directionsDisplay.setOptions({
    suppressMarkers: true
  });

  //directionsDisplay.setMap(map);
  //directionsDisplay.setDirections({ routes: [] });
  // Set destination, origin and travel mode.
  var request = {
    destination: pointB,
    origin: pointA,
    travelMode: google.maps.TravelMode.DRIVING
  };
  //directionsDisplay.setMap(null);
  // Pass the directions request to the directions service.  
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // Display the route on the map.
      //directionsDisplay.set('directions', null);

      //directionsDisplay.setMap(map);
      //directionsDisplay.setDirections({ routes: [] });
      directionsDisplay.setDirections(response);

    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}

＆＃13;

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

＆＃13;

＆＃13;

＆＃13;