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方法包括线，其将一个 对象添加到上面定义的数组：

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/