Google Maps API-切换标记可见性

Question

如何在Google Maps API中切换标记子集的可见性？

我有两组标记位置数据。 想要添加一个按钮来独立切换每个集合的可见性。

为了方便起见，下面有完整的代码。 我在标题中有一个按钮代码。

<button onclick="toggleMELocations()">Toggle ME Locations</button>`

该按钮显示出来，但是单击不会产生预期的结果（ME位置消失）。

相关功能是“ toggleMELocations”。 我想说的是，如果当前可以看到ME位置，请使其不可见。 反之亦然。

任何帮助深表感谢。

var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
  lat: 40,
  lng: -95
},
styles: [{
  stylers: [{
    saturation: -100
  }]
}]
});

setMarkers(map);
}

function toggleMELocations() {
if (MEs) {
for (i in MEs) {
  var visibility = (MEs[i].getVisible() == true) ? false : true;
  MEs[i].setVisible(visibility);
  }
 }
}

// MEC locations
var MEs = [
['aaa', 36.07, -75.79],
['bbb', 40.07, -83.79]
];

// CC locations
var Concentras = [
['xxx', 38.01, -75.55],
['yyy', 30.10, -90.3]
];

function setMarkers(map) {
 // Adds markers to the map.

 for (var i = 0; i < MEs.length; i++) {
 var ME = MEs[i];
 var marker = new google.maps.Marker({
  position: {
    lat: ME[1],
    lng: ME[2]
  },
  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
  map: map,
  title: ME[0]

});
}

for (var i = 0; i < Concentras.length; i++) {
var Concentra = Concentras[i];
var marker = new google.maps.Marker({
  position: {
    lat: Concentra[1],
    lng: Concentra[2]
  },
  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
  map: map,
  title: Concentra[0]

});
 }
 }

Answer 1

首先， getVisible()不是有效的函数。

您需要添加一个定义的全局变量： var addedMEs = []; 这充当已在setMarkers方法中添加到地图的标记数组。 我们将setMarkers方法更改为包括一行，该行会将marker 对象添加到上面定义的数组中：

for (var i = 0; i < MEs.length; i++) {
    var ME = MEs[i];
    var marker = new google.maps.Marker({
      position: {
        lat: ME[1],
        lng: ME[2]
      },
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      map: map,
      title: ME[0]

    });
    addedMEs.push(marker);
  }

然后，我们需要删除getVisible()方法，因为该方法无效。 我们将此行更改为：

  var bounds = map.getBounds();
  var visibility = (bounds.contains(addedMEs[i].position) == true) ? false : true;
  addedMEs[i].setVisible(visibility);

而且有效。 ：]

这是尝试的JSFiddle： https ://jsfiddle.net/cmjcs5eL/13/