Google Maps API无刷新切换标记分组显隐适配实现问题求助

实现方案 #

第一步：修正HTML代码（解决id重复的规范问题） #

<input type="checkbox" class="state-toggle" name="Backlog" checked> Backlog
<input type="checkbox" class="state-toggle" name="Breached" checked> Breached
<input type="checkbox" class="state-toggle" name="Active" checked> Active
<input type="checkbox" class="state-toggle" name="Scheduled" checked> Scheduled
<div id="map" style="height:800px;"></div>

第二步：修改JavaScript代码，新增分组存储和切换逻辑 #

修改点说明：

• 新增按state字段分组存储标记的对象
• 生成标记时自动归入对应分组
• 新增复选框监听事件，切换对应分组标记的可见性
• 保留MarkerClusterer时只需额外刷新聚合实例即可兼容

<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 6,
        center: {lat: 54.3266311, lng: -2.7585563},
        mapTypeId: 'roadmap'
    });

    var infoWin = new google.maps.InfoWindow();
    // 按state分组存储标记
    var markerGroups = {};

    var markers = locations.map(function(location, i) {
        var marker = new google.maps.Marker({
            position: location,
            icon: 'https://maps.google.com/mapfiles/kml/'+location.type,
            visible: true
        });
        google.maps.event.addListener(marker, 'click', function(evt) {
            infoWin.setContent(location.info);
            infoWin.open(map, marker);
        });
        // 将标记存入对应state分组
        if (!markerGroups[location.state]) {
            markerGroups[location.state] = [];
        }
        markerGroups[location.state].push(marker);
        return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
            minimumClusterSize: 2,
            maxZoom: 4,
            zoomOnClick: false
        }
    );

    // 复选框切换逻辑
    document.querySelectorAll('.state-toggle').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const targetState = this.name;
            const isShow = this.checked;
            if (!markerGroups[targetState]) return;
            // 批量修改对应分组标记可见性
            markerGroups[targetState].forEach(marker => {
                marker.setVisible(isShow);
            });
            // 保留聚合功能需要刷新实例，不需要聚合可删除此行
            markerCluster.refresh();
        });
    });
}

var locations = [{lat:53.750503,lng:-2.429168,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199925"},{lat:51.290162,lng:-0.833112,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 76669845"},{lat:51.301737,lng:0.051969,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199930"},{lat:50.525378,lng:-3.594341,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875603"},{lat:51.581895,lng:-0.724800,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78581052"},{lat:50.391133,lng:-4.072097,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78106941"},{lat:51.318527,lng:-1.021035,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78396115"},{lat:50.443925,lng:-3.561630,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875582"},{lat:53.625107,lng:-2.337432,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80444510"},{lat:52.432582,lng:-2.026563,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80423141"}]
</script>

可选：移除MarkerClusterer的调整 #

如果不需要聚合功能，直接删除markerCluster相关的初始化代码，以及事件监听中的markerCluster.refresh()行即可，标记切换逻辑不受影响。

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