如何隐藏/显示谷歌地图折线符号

目前没有任何方法可以动态控制多段线上的图标，

一种选择是，当您想要隐藏/显示或更改阵列的颜色时，重置阵列。

下面的代码定义了一个图标数组（iconArray），它将其用作默认值，然后允许使用复选框显示/隐藏图标，您可以通过在文本框中放入有效的颜色来动态更改颜色。

[概念验证小提琴[(http://jsfiddle.net/geocodezip/Lw3susjz/2/)

代码片段：

// This example converts a polyline to a dashed line, by
// setting the opacity of the polyline to 0, and drawing an opaque symbol
// at a regular interval on the polyline.
var line;
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 20.291,
      lng: 153.027
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  // [START region_polyline]
  // Define a symbol using SVG path notation, with an opacity of 1.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "#84479B",
    fillOpacity: 1,
    fillColor: "#84479B",
    scale: 5
  };
  // Create the polyline, passing the symbol in the 'icons' property.
  // Give the line an opacity of 0.
  // Repeat the symbol at intervals of 20 pixels to create the dashed effect.
  line = new google.maps.Polyline({
    path: [{
      lat: 22.291,
      lng: 153.027
    }, {
      lat: 18.291,
      lng: 153.027
    }],
    strokeOpacity: 0,
    icons: iconsArray,
    map: map
  });
  // [END region_polyline]
  var checkboxes = document.getElementsByName('icons')
  for (var i = 0; i < checkboxes.length; i++) {
    google.maps.event.addDomListener(checkboxes[i], 'change', checkboxHandler);
  }
}
google.maps.event.addDomListener(window, "load", initMap);
function checkboxHandler() {
  var checkboxes = document.getElementsByName('icons');
  var iconcolors = document.getElementsByName('iconcolor');
  var tempIcons = [];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      tempIcons.push(iconsArray[i]);
      var color = iconcolors[i].value;
      if (color !== '') {
        tempIcons[tempIcons.length - 1].icon.strokeColor = iconcolors[i].value;
        tempIcons[tempIcons.length - 1].icon.fillColor = iconcolors[i].value;
      }
    }
  }
  line.set("icons", tempIcons);
}
var iconsArray = [{
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "#84479B",
    fillOpacity: 1,
    fillColor: "#84479B",
    scale: 5
  },
  offset: '15px',
}, {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "red",
    fillOpacity: 1,
    fillColor: "red",
    scale: 5
  },
  offset: '30px',
}, {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "blue",
    fillOpacity: 1,
    fillColor: "blue",
    scale: 5
  },
  offset: '45px',
}, {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "green",
    fillOpacity: 1,
    fillColor: "green",
    scale: 5
  },
  offset: '60px',
}, {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "yellow",
    fillOpacity: 1,
    fillColor: "yellow",
    scale: 5
  },
  offset: '75px',
}, {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 0,
    stokeColor: "orange",
    fillOpacity: 1,
    fillColor: "orange",
    scale: 5
  },
  offset: '90px',
}];

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<label>1</label>
<input type="checkbox" id="purple" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<label>2</label>
<input type="checkbox" id="red" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<label>3</label>
<input type="checkbox" id="blue" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<label>4</label>
<input type="checkbox" id="green" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<label>5</label>
<input type="checkbox" id="yellow" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<label>6</label>
<input type="checkbox" id="orange" name="icons" checked="checked" />
<input type="text" name="iconcolor" />
<br />
<div id="map"></div>