如何在更新后删除或移动Google Maps中的标记？

你现在的问题是每次收到WebSocket数据都会创建新标记，但旧标记没被清理。解决方法很简单——用一个数组保存所有标记的引用，每次更新前先删除旧标记，具体修改如下：

关键修改点 #

• 新增数组存储所有标记，方便后续批量删除
• 每次收到新数据时，先遍历数组删除旧标记，再创建新标记并加入数组
• 给marker变量加上let，避免全局变量污染

修改后的完整代码 #

function setMarkers(map) {
    let markers = []; // 用来存储所有标记的数组
    var ws = new WebSocket('ws://localhost:8000/ws/bus/');
    ws.onmessage = function(e){
        var data = JSON.parse(e.data);

        // 1. 删除所有旧标记
        markers.forEach(marker => marker.setMap(null));
        markers = []; // 清空数组

        // 2. 创建新标记并加入数组
        for (let i=0; i<data.length; i++){
            let marker = new google.maps.Marker({ // 加let避免全局变量
                position: {
                    lat: data[i]['py'],
                    lng: data[i]['px'],
                },
                map: map,
            });
            markers.push(marker); // 将新标记存入数组
        }
    }
}

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 14,
        center: { lat: -23.54, lng: -46.69 },
    });
    setMarkers(map);
}

window.initMap = initMap;

原理说明 #

• marker.setMap(null)会把标记从地图上移除，之后清空数组可以让垃圾回收机制处理这些废弃的标记对象
• 用数组统一管理所有标记，就能实现批量删除，不用单独跟踪每个标记的引用

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