切换travelMode时无法清除Google Maps旧路线，如何解决？

这个问题的核心在于你每次生成新路线时，没有对之前创建的路线渲染器（DirectionsRenderer）进行清理，导致旧的路线实例一直绑定在地图上，新路线自然就叠加上去了。下面是具体的解决办法：

步骤1：保存路线渲染器的全局引用 #

在你的initMap函数外部或者函数内部的顶部，定义一个变量来存储当前的DirectionsRenderer实例，这样每次切换模式时都能找到旧的路线对象：

let directionsRenderer; // 用来保存当前的路线渲染器实例

步骤2：生成新路线前清除旧路线 #

在你调用Google Maps Directions Service获取新路线的逻辑里，先检查directionsRenderer是否存在。如果存在，就调用setMap(null)把旧路线从地图上移除，然后再创建新的渲染器实例：

结合你的代码片段，补全修改后的示例：

function initMap() {
  geocoder = new google.maps.Geocoder();
  var iconBestaandeklant = { 
    url: 'http://icons.iconarchive.com/...' 
  };
  let directionsRenderer; // 定义路线渲染器变量
  let directionsService = new google.maps.DirectionsService();
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  // 假设这是你的travelMode切换处理函数
  function changeTravelMode(newMode) {
    // 先清除旧路线
    if (directionsRenderer) {
      directionsRenderer.setMap(null);
    }

    // 创建新的路线请求
    const request = {
      origin: "你的起点坐标/地址",
      destination: "你的终点坐标/地址",
      travelMode: newMode // 传入新的travelMode，比如google.maps.TravelMode.DRIVING
    };

    // 请求新路线并渲染
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(result);
      }
    });
  }
}

关键说明 #

• directionsRenderer.setMap(null)：这个方法会把之前渲染的路线从地图上移除，相当于彻底清除旧路线。
• 每次生成新路线时，都要重新创建DirectionsRenderer实例并赋值给全局变量，确保下次切换travelMode时能找到旧实例进行清理。

如果你的现有代码里已经有DirectionsService和路线请求的逻辑，只需要把清除旧路线的逻辑嵌入进去就可以了，核心就是保存旧的渲染器实例并在新路线生成前调用setMap(null)。

内容的提问来源于stack exchange，提问作者Diego