时间戳

首页 > 解决方案 > JS - 如何删除使用谷歌地图 API 生成的所有路线

javascript - JS - 如何删除使用谷歌地图 API 生成的所有路线

问题描述

我有一个项目，我需要在 2 个标记之间显示路线。我发现这篇我定制的帖子效果很好（顺便说一句，非常感谢）： Google Maps Api straight (shortest) route

现在，当用户选择另一个地址/标记时，会显示新路线，但旧路线也保留在那里，所以显然我需要在渲染新路线之前摆脱它们。我挣扎了好几天，但我不断收到各种错误。（我承认，我的 JS 水平还是一般……）

我认为呈现它们的一点是：

      //painting the routes in green blue and red
      routesResponses.forEach(function (res) {
        res.routes.forEach(function (rou, index) {
          new google.maps.DirectionsRenderer({
         // directionsRenderer({
            map: map,
            directions: res,
            routeIndex: index,
            polylineOptions: {
              strokeColor:
                rou.legs[0].duration.value == fastest
                  ? "red"
                  : rou.legs[0].distance.value == shortest
                  ? "darkgreen"
                  : "blue",
              strokeOpacity:
                rou.legs[0].duration.value == fastest
                  ? 0.8
                  : rou.legs[0].distance.value == shortest
                  ? 0.9
                  : 0.5,
              strokeWeight:
                rou.legs[0].duration.value == fastest
                  ? 9
                  : rou.legs[0].distance.value == shortest
                  ? 8
                  : 3,
            },
          });
        });
      });

但是因为 foreach 循环中有“新的 google.maps.DirectionsRenderer”，所以我不知道如何获取这些对象并删除它们。我尝试new google.maps.DirectionsRenderer在全局范围内移动上述内容，但随后出现错误“未捕获的 TypeError：directionsRenderer 不是函数”。

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

因为您要创建多个DirectionsRenderer对象，所以应该使用数组来存储它们。

创建一个将遍历此数组并调用该setMap(null)方法以DirectionsRenderer从地图中删除实例的函数。之后清除数组。

将它放在可用于routesResponses循环的范围内。

const directionRenderers = [];

function removeDirectionRenderers() {
  directionRenderers.forEach(directionRenderer => {
    directionRenderer.setMap(null));
  });
  directionRenderers.length = 0;
}

在添加您的DirectionsRenderer实例之前，请先调用 remove 函数。现在应该从地图中删除实例并清除数组。

// Remove all 
removeDirectionRenderers()

//painting the routes in green blue and red
routesResponses.forEach(function (res) {
  res.routes.forEach(function (rou, index) {
    const directionRenderer = new google.maps.DirectionsRenderer({
      map: map,
      directions: res,
      routeIndex: index,
      polylineOptions: {
        strokeColor:
        rou.legs[0].duration.value == fastest
          ? "red"
          : rou.legs[0].distance.value == shortest
          ? "darkgreen"
          : "blue",
        strokeOpacity:
        rou.legs[0].duration.value == fastest
          ? 0.8
          : rou.legs[0].distance.value == shortest
          ? 0.9
          : 0.5,
        strokeWeight:
        rou.legs[0].duration.value == fastest
          ? 9
          : rou.legs[0].distance.value == shortest
          ? 8
          : 3,
      },
    });

    // Add to the array.
    directionRenderers.push(directionRenderer);
  });
});

推荐阅读