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/

Google Maps API - 切换标记可见性

1 个答案: