javascript - 如何隐藏/显示 Google map 折线符号

Question

我有这些符号，可以用符号制作多段线。我想隐藏和显示它们以及隐藏/显示随机的。

是否有icon.hidden = true或lineSymbol.hide()？

// 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.

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: 1,
    fillOpacity: 1,
    scale: 3
  };

  // 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.
  var line = new google.maps.Polyline({
    path: [{
      lat: 22.291,
      lng: 153.027
    }, {
      lat: 18.291,
      lng: 153.027
    }],
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }],
    map: map
  });
  // [END region_polyline]
}
google.maps.event.addDomListener(window, "load", initMap);


function hidePath(line) {
    var count = 0;
    var icons = line.get('icons');

    for(var i = 0; i < icons.length-1; i++){
      icons[i].fillOpacity = 0;
      icons[i].strokeOpacity = 0;
    }
}

var myVar;
function animateCircle(line) {
    var count = 0;
   myVar = window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      for(var i = 0; i < icons.length-1; i++){
        icons[i].fillOpacity = 0;
        icons[i].strokeOpacity = 0;
        line.set('icons', icons);
      }
      
  }, 1);
}

function stopAnimateCircle() {
    clearInterval(myVar);
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Answer 1

(当前)没有任何方法可以动态控制折线上的图标，

一种选择是当您想要隐藏/显示或更改其颜色时重置数组。

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

[概念验证 fiddle [( 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>