本文介绍如何使用 radio 按钮实现 Google Maps 上标记组的独占式显隐控制：点击任一类别时，自动隐藏所有已显示标记、关闭信息窗口，并仅显示该类别的标记。
在构建基于 Google Maps 的项目时，我们常常遇到一个非常具体的需求：如何让用户能像切换电台频道一样，在“餐厅”、“公园”、“酒店”等不同类别的地点标记之间，做到清晰、利索的“一键切换”？
很多开发者最初会想到用复选框（checkbox）来实现多选过滤，这固然好用。但一旦业务逻辑要求变成“单选互斥”——也就是说，一次只能看一类地点——事情就有点微妙了。直接把 checkbox 换成 type=“radio” 的按钮，你以为就完事了吗？结果往往让人挠头：新选中的类别标记是出来了，可旧类别的标记却赖在地图上不走，几个类别的点混杂在一起，完全违背了“独占显示”的初衷。
问题出在哪？关键在于，radio 按钮本身并不知道“地图”这回事，它只负责自己的选中状态。要让地图标记听话，我们得自己搭建一套指挥系统。
✅ 正确实现思路：集中管理 + 显式清除
这个问题的核心解法，其实可以概括为两个词：集中管理和显式清除。说白了，就是不能再让标记“散养”着，而是要给它们登记造册，统一听令。
我们需要建立一个全局的“花名册”——一个Ja vaScript对象，以类别名为键，把属于该类别的所有标记实例（Google Maps Marker对象）都收纳进对应的数组里。这样，当用户点击某个单选按钮时，我们的事件处理器就能干三件明确的事：首先，关掉任何可能还开着的信息弹窗；接着，拿着这本“花名册”，遍历所有在册的标记，将它们从地图上清场；最后，只把当前选中类别对应的那组标记，请上地图。
下面这段优化后的代码，清晰地展示了这一流程：
$(window).load(function () {
// 【1】全局标记容器：按 category 分组存储 marker 实例
const markers = {};
const places = {
restaurant: {
label: 'restaurants',
icon: 'https://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: 'https://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 = $('').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 = $('', {
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($('').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隐藏，那些方式可能在后续操作中带来意想不到的副作用。
- 信息窗口必须手动关闭：在切换类别标记之前，务必调用一下 infowindow.close()。否则，上一个地点打开的详情窗口，可能会飘飘然地悬浮在一片空荡荡的地图之上，非常尴尬。
- 避开 MVCObject 绑定的“坑”：在实现多选时，我们有时会用 .bindTo(‘map’, …) 这种数据绑定方式，让它很省心。但在严格的单选场景下，这种自动化的状态绑定反而容易引发冲突，导致标记清理不干净。直接手动调用 setMap() 来控制显示与否，逻辑更清晰，也更可控。
- 性能不是小问题：如果你的项目动辄有成百上千个标记点，那就得悠着点了。在初始化时就创建所有标记可能会让页面卡顿。这时候，可以考虑引入 MarkerClusterer 进行聚合展示，或者采用懒加载策略，只在实际需要显示时才创建标记实例。
✅ 总结
总而言之，要实现通过单选按钮干净利落地切换Google Maps标记组，秘诀就在于建立一个中心化的标记管理机制，并在每次切换时严格执行“清场-上新”的标准化流程。具体来说，就是：维护一个全局的 markers 分组字典，在 radio 按钮的切换事件中，先关闭信息窗口，再清空地图上所有现有标记，最后只渲染出当前选中类别的标记。
这套方案逻辑直白，扩展性也强——要增加一个新类别，基本上只需要在 places 配置对象里添一组数据就行了。它严格遵循了 Google Maps Ja vaScript API v3 的规范，可以说是实现此类需求的一个稳健、高效的最佳实践。
