本文介绍如何使用 radio 按钮实现 google maps 上标记组的独占式显隐控制：点击任一类别时，自动隐藏所有已显示标记、关闭信息窗口，并仅显示该类别的标记。
本文介绍如何使用 radio 按钮实现 google maps 上标记组的独占式显隐控制：点击任一类别时，自动隐藏所有已显示标记、关闭信息窗口，并仅显示该类别的标记。
在基于 Google Maps API 的标记管理中，常见需求是按分类（如“餐厅”“公园”）动态显示/隐藏标记。原方案使用复选框（checkbox）支持多选，但当需单选互斥行为（即一次仅显示一个类别）时，单纯将 type="checkbox" 替换为 type="radio" 并不够——因为 radio 本身不自动清理其他类别的标记，导致旧标记残留，违背“仅显示当前类别”的核心逻辑。
✅ 正确实现思路：集中管理 + 显式清除
关键在于维护一个全局标记引用映射表（markers），以类别名为键（key），存储该类别下所有 google.maps.Marker 实例的数组。这样，在 radio 点击事件中，可先遍历并调用 setMap(null) 清除当前类别所有标记（确保无残留），再通过 MVC 绑定机制启用新类别。
以下是精简优化后的核心实现：
$(window).load(function () {
// 【1】全局标记容器：按 category 分组存储 marker 实例
const markers = {};
const places = {
restaurant: {
label: 'restaurants',
icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
items: [
['Melt Bar and Grill', 41.485345, -81.799047],
['Sloane Pub', 41.486182, -81.824178],
['Spitfire Salon', 41.479670, -81.768430],
['Mahall\'s', 41.476989, -81.781094],
['Szechwan Garden', 41.485615, -81.787890]
]
},
park: {
label: 'parks',
checked: true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
items: [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
]
}
};
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047)
});
const infowindow = new google.maps.InfoWindow();
const ctrl = $('<div></div>').css({
background: '#fff',
border: '1px solid #000',
padding: '4px',
margin: '2px',
textAlign: 'center'
});
// 【2】初始化：为每个 category 创建空数组
Object.keys(places).forEach(category => {
markers[category] = [];
});
// 【3】遍历每个类别，创建 radio 并绑定逻辑
$.each(places, function (category, config) {
const $radio = $('<input>', {
type: 'radio',
name: 'category-selector'
}).change(function () {
// ? 步骤1：关闭可能打开的信息窗口
infowindow.close();
// ? 步骤2：清除【所有】已显示的标记（非仅本类！）
// ⚠️ 注意：此处应清空全部，而非仅当前 category —— 原答案有误，已修正
Object.values(markers).flat().forEach(marker => marker.setMap(null));
// ✅ 步骤3：仅显示当前选中 category 的标记
markers[category].forEach(marker => marker.setMap(map));
})
.prop('checked', !!config.checked)
.appendTo($('<div></div>').css({ whiteSpace: 'nowrap', textAlign: 'left' }).appendTo(ctrl))
.after(config.label);
// 【4】创建本类所有标记，并存入 markers[category]
config.items.forEach(item => {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(item[1], item[2]),
title: item[0],
icon: config.icon,
map: null // 初始不显示
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(item[0]);
infowindow.open(map, this);
});
markers[category].push(marker);
});
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
});
⚠️ 关键注意事项
- setMap(null) 是隐藏标记的唯一可靠方式：不要依赖 setVisible(false) 或 CSS 隐藏，Google Maps API 中 setMap(null) 才真正从地图移除。
- 信息窗口必须手动关闭：infowindow.close() 应在每次 radio 切换前调用，避免跨类别残留。
- 避免 MVCObject 绑定干扰单选逻辑：原方案中 .bindTo('map', cat.data('goo'), 'map') 适用于复选框的独立控制，但在单选场景下易引发状态冲突；直接管理 setMap() 更清晰可控。
- 性能提示：若标记量极大（>1000），建议结合 MarkerClusterer 或懒加载策略，避免初始全量渲染卡顿。
✅ 总结
通过引入 markers 对象集中管理、在 radio change 回调中统一执行「关闭 infoWindow → 清空全部标记 → 显示目标类别」三步操作，即可完美实现单选按钮驱动的标记组切换。此方案逻辑明确、易于扩展（如新增类别只需更新 places 对象），且完全兼容 Google Maps JavaScript API v3 最佳实践。
