求助：实现单选按钮控制Google Maps显示/隐藏标记

没问题！我帮你搞定这个需求，下面是具体的实现步骤和代码，直接用就行：

核心就是给两个单选按钮绑定点击事件，选中不同选项时控制地图标记的显示/隐藏，同时确保地图只初始化一次，避免重复加载浪费资源。

HTML 部分（补全了必要的ID，方便JS获取元素） #

<div>
  <input type="radio" name="reception" id="rad-livraison" value="livraison"> Livraison
</div>
<div>
  <input type="radio" name="reception" id="rad-point" value="point"> Point de récuperation
</div>
<div id="map" style="display:none; height: 300px; border: 1px solid #ccc;"></div>

JavaScript 部分（包含地图初始化、标记管理和事件监听） #

// 全局变量存地图实例和所有标记，方便后续操作
let mapInstance;
let mapMarkers = [];

// 初始化地图的函数
function initGoogleMap() {
  // 创建地图，这里用巴黎坐标做示例，你可以换成自己需要的中心点
  mapInstance = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 48.8566, lng: 2.3522 },
    zoom: 12
  });

  // 创建几个示例标记，你可以替换成自己的标记数据
  const markerLocations = [
    { lat: 48.8566, lng: 2.3522 },
    { lat: 48.8606, lng: 2.3376 },
    { lat: 48.8738, lng: 2.2950 }
  ];

  // 把标记添加到地图，同时存入数组统一管理
  markerLocations.forEach(location => {
    const marker = new google.maps.Marker({
      position: location,
      map: mapInstance
    });
    mapMarkers.push(marker);
  });
}

// 统一控制标记显示/隐藏的函数
function toggleMarkerVisibility(shouldShow) {
  mapMarkers.forEach(marker => {
    marker.setVisible(shouldShow);
  });
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const livraisonRadio = document.getElementById('rad-livraison');
  const pointRadio = document.getElementById('rad-point');
  const mapContainer = document.getElementById('map');

  // 选中Livraison时显示地图+标记
  livraisonRadio.addEventListener('click', () => {
    mapContainer.style.display = 'block';
    // 如果地图还没初始化，先初始化
    if (!mapInstance) initGoogleMap();
    toggleMarkerVisibility(true);
  });

  // 选中Point de récuperation时显示地图但隐藏标记
  pointRadio.addEventListener('click', () => {
    mapContainer.style.display = 'block';
    // 如果地图还没初始化，先初始化
    if (!mapInstance) initGoogleMap();
    toggleMarkerVisibility(false);
  });
});

• API引入：记得在页面里引入Google Maps的API脚本，替换成你自己的API密钥：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥" async defer></script>

• 地图初始化时机：我们设置成点击单选按钮时才初始化地图，避免页面加载就加载地图，节省资源；如果需要页面加载就初始化，直接在DOMContentLoaded里调用initGoogleMap()就行。
• 标记自定义：你可以修改markerLocations数组里的坐标，换成自己需要的标记位置，也可以给标记添加自定义图标、弹窗等，具体逻辑可以参考Google Maps官方文档扩展。

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