单按钮实现Google Marker显示/隐藏切换的技术问题

嘿，我看你想做一个按钮切换单个Marker的显示状态，而且不想用数组来管理——其实你的核心问题不是切换逻辑本身，而是变量作用域的问题！

你现在的代码里，ntucmap是在initMap函数内部声明的局部变量，外部的toggleNTUCmap函数根本访问不到它，所以不管你用setVisible还是setMap的写法，都会因为找不到ntucmap这个变量而失效。

下面给你两种可行的解决方案，都不用数组：

方案1：把Marker变量提升到全局作用域（最简单直接） #

把ntucmap的声明移到函数外面，让两个函数都能访问到它：

let map;
let ntucmap; // 全局声明Marker变量，让toggle函数能拿到

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

function toggleNTUCmap() {
  // 用简洁的写法切换可见性
  ntucmap.setVisible(!ntucmap.getVisible());
  // 你之前尝试的setMap写法也能用，效果完全一样：
  // ntucmap.setMap(ntucmap.getMap() ? null : map);
}

按钮代码保持不变就好：

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

方案2：用闭包封装（更优雅，避免全局变量污染） #

如果不想随便增加全局变量，可以用闭包把Marker和切换函数绑定在一起，只把切换函数暴露给全局：

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

  // 把toggle函数挂载到window上，让按钮的onclick能调用到
  window.toggleNTUCmap = function() {
    ntucmap.setVisible(!ntucmap.getVisible());
    // 同样也可以用setMap的写法：
    // ntucmap.setMap(ntucmap.getMap() ? null : map);
  };
}

这样ntucmap还是initMap内部的局部变量，但通过闭包，toggleNTUCmap依然能访问到它，同时不会额外污染全局作用域。

补充说明：两种切换方式的区别 #

• setVisible(true/false)：Marker依然和地图保持绑定，只是视觉上隐藏，切换速度更快，适合频繁切换的场景。
• setMap(null/map)：相当于把Marker从地图上移除或重新添加，效果和隐藏一致，但如果Marker需要和地图解绑的话更适合用这个。

内容的提问来源于stack exchange，提问作者Eddie