Google地图：单击时更改多段线的颜色，但单击第二条多段线时将其更改为原始颜色

Question

我有一个网站，其中有许多远足路径在Google地图中显示为折线。所有折线的默认颜色均为Strokecolor绿色。我希望单击多段线时，多段线颜色变为红色。它应保持红色，直到单击第二条（不同的）折线。然后，第一条折线应变回绿色，而第二条折线应变红。

我进行了搜索，并尝试了许多解决方案，但没有任何效果。

我提交的“测试”代码是“干净的”，没有任何失败的尝试。

[ERROR] Failed to execute goal on project batch: Could not resolve dependencies for project XXX: Could not find artifact org.codehaus.groovy:groovy-all:jar:2.5.3 in XXX -> [Help 1]

Answer 1

添加全局变量..先前的路径，并在单击对象时分配对象值，然后更改实际对象的颜色并恢复prev_path对象的颜色

var prev_path;


     flightPath.addListener('click', function(event) {

        this.setOptions({
            zIndex: 10,
            strokeColor: your_strokeColor,
            strokeOpacity: your_strokeOpacity,
            strokeWeight: your__strokeWeight 
            icons: [{
              icon: pathSymbol,
              offset: '0',
              repeat: '40px',
              zIndex: 10
            }],
          });

        if (prevPath){
          prev_path.setOptions({
              zIndex: 10,
            strokeColor: your_color_for_not_select_strokeColor,
            strokeOpacity: your_color_for_not_select_strokeOpacity,
            strokeWeight: your_color_for_not_select_strokeWeight 
          });
        }

        prev_path = this;

    });

Answer 2

一种选择是保留对所有折线的引用，处理该列表，将其设置为单击时将其设置回默认值，然后将当前折线设置为“选定颜色”。

var polylines = [];
function addPath(props) {
  flightPath = new google.maps.Polyline({
    path: props.path,
    strokeColor: props.strokeColor,
    strokeOpacity: props.strokeOpacity,
    strokeWeight: props.strokeWeight,
    normalOptions: {
      strokeColor: props.strokeColor,
    },
    selectedOptions: {
      strokeColor: "red",
    }
  });
  flightPath.setMap(map);
  polylines.push(flightPath);

  flightPath.addListener('mouseover', function(event) {
    this.setOptions({
      zIndex: 10,
      icons: [{
        icon: pathSymbol,
        offset: '0',
        repeat: '40px',
        zIndex: 10
      }],
    });
  });

  flightPath.addListener('mouseout', function(event) {
    this.setOptions({
     zIndex: 0,
      icons: [{
        visible: false,
        zIndex: 0
      }],
    });
  });
  flightPath.addListener('click', function(event) {
    for (var i=0; i<polylines.length; i++) {
      polylines[i].setOptions(polylines[i].normalOptions)
    }
    this.setOptions(this.selectedOptions);
  })
}

proof of concept fiddle

代码段：

<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
  #map {
    height: 100%;
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<div id="map"></div>
<script>
  var map;
  var flightPath;
  var pathSymbol;

  function initMap() {
    pathSymbol = {
      path: google.maps.SymbolPath.CIRCLE,
      strokeColor: '#FF0000',
      strokeOpacity: 1,
      strokeWeight: 4,
      fillColor: '#FF0000',
      fillOpacity: 1,
      scale: 3
    };

    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45,
        lng: -87
      },
      zoom: 6
    });

    var flightPlanCoordinates = [
      { lat: 42.5, lng: -86.5 },
      { lat: 42.5, lng: -87.5},
      { lat: 43.5, lng: -88.5 },
      { lat: 44.5, lng: -88.5 },
      { lat: 46.5, lng: -89.5 },
      { lat: 49.5, lng: -89.5 },
    ];
    var flightPlanCoordinates2 = [
      { lat: 42, lng: -86 },
      { lat: 42, lng: -87},
      { lat: 42, lng: -88 },
      { lat: 43, lng: -88 },
      { lat: 44, lng: -89 },
      { lat: 49, lng: -89 },
    ];
    var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

    for (let i = 0; i < 2; i++) {
      addPath({
        path: arrayOfFlightPlans[i],
        strokeColor: '#8CB65F',
        strokeOpacity: 1.0,
        strokeWeight: 4,
      });
    }
  }
  var polylines = [];

  function addPath(props) {
    flightPath = new google.maps.Polyline({
      path: props.path,
      strokeColor: props.strokeColor,
      strokeOpacity: props.strokeOpacity,
      strokeWeight: props.strokeWeight,
      normalOptions: {
        strokeColor: props.strokeColor,
      },
      selectedOptions: {
        strokeColor: "red",
      }
    });
    flightPath.setMap(map);
    polylines.push(flightPath);

    flightPath.addListener('mouseover', function(event) {
      this.setOptions({
        zIndex: 10,
        icons: [{
          icon: pathSymbol,
          offset: '0',
          repeat: '40px',
          zIndex: 10
        }],
      });
    });

    flightPath.addListener('mouseout', function(event) {
      this.setOptions({
        zIndex: 0,
        icons: [{
          visible: false,
          zIndex: 0
        }],
      });
    });
    flightPath.addListener('click', function(event) {
      for (var i = 0; i < polylines.length; i++) {
        polylines[i].setOptions(polylines[i].normalOptions)
      }
      this.setOptions(this.selectedOptions);
    })
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>