用1个按钮切换显示/隐藏谷歌标记

Question

我正在尝试切换一个按钮，该按钮将隐藏/显示放置在地图中的谷歌标记。我一直在寻找有关 SOF 的答案，但都提供了数组方法。我想知道是否可以在没有数组的情况下做到这一点。

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 1.3420894594991328, lng: 103.83490918886719},
});
var ntuc = {
lat: 1.32805676,
lng: 103.9216584
};
var ntucmap = new google.maps.Marker({
position: ntuc,
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png'
});
}
function toggleNTUCmap() {
if (!ntucmap.getVisible()) {
ntucmap.setVisible(true);
} else {
ntucmap.setVisible(false);
}
}

按钮

<button class="button-oj pure-button" onclick="toggleNTUCmap()">
<i class="fas fa-hospital"></i> NTUC</button>

对于函数切换NTUCmap((，我已经尝试了以下方法，但仍然不起作用。

ntucmap.setMap(ntucmap.getMap() ? null : map);

Answer 1

你不能做这样的事情吗？

function clearMap(map) {
for(var i = 0; i<ntucmap.length; i++){
ntucmap[i].setMap(null);
}
}

和节目部分

function setMapOnAll(map) {
for (var i = 0; i < ntucmap.length; i++) {
ntucmap[i].setMap(map);
}
}

然后把它放在一个按钮上，你可以用你的按钮保持一个计数器，当它甚至做一个功能时，当它很奇怪时做另一个？

Answer 2

// Adds a marker at the center of the map.
var ntuc = {lat: 1.32805676, lng: 103.9216584};
addMarker(ntuc);
setMapOnAll(null);
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png'
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Show/Hide Markers
var counter = 0;
function toggleMarkers() {
if (counter == 0) {
setMapOnAll(map);
counter = 1;
} else {
setMapOnAll(null);
counter = 0;
}
}

最后，我使用数组来保存所有标记。根据用户用于切换的按钮，它将确定它标记是否将显示在地图上。