移除Google Map GeoJSON多边形：加载新数据时旧数据未清除问题

问题分析与解决方法 #

哦，我一眼就看出问题所在啦！你现在尝试清除的是map.data（Google Maps默认的Data图层）里的要素，但实际用来加载GeoJSON数据的是你自己创建的drawLayerSite这个自定义Data图层啊！map.data里根本没有你添加的要素，所以map.data.forEach自然找不到任何内容可以清除，旧数据当然会一直保留着😅

修正后的代码 #

你只需要把清除要素的操作从map.data改成针对drawLayerSite就行，还要注意第一次调用时drawLayerSite可能还未初始化的情况，加个判断：

var map = null, drawLayerSite = null; 
map = new google.maps.Map(document.getElementById('mapDiv'), { 
    zoom: 11, 
    mapTypeId: 'terrain' 
}); 

function reloadGeoJson(geoJson) { 
    // 先清除自定义图层里的旧要素（如果图层已存在）
    if (drawLayerSite) {
        drawLayerSite.forEach(function(feature) {
            drawLayerSite.remove(feature);
        });
    } else {
        // 第一次创建图层
        drawLayerSite = new google.maps.Data({map:map}); 
        drawLayerSite.setStyle({ 
            fillColor: 'rgba(1, 84, 90, 0.5)', 
            fillOpacity: 0.5, 
            strokeWeight: 1, 
            strokeColor: '#01545A', 
            strokeOpacity: 0.8 
        });
    }
    // 添加新的GeoJSON数据
    drawLayerSite.addGeoJson(geoJson); 
}

额外简化方案 #

如果你觉得每次遍历清除要素麻烦，也可以直接先把旧图层从地图上移除，再重新创建，代码更简洁：

function reloadGeoJson(geoJson) { 
    // 移除旧图层（如果存在）
    if (drawLayerSite) {
        drawLayerSite.setMap(null);
    }
    // 重新创建图层并设置样式
    drawLayerSite = new google.maps.Data({map:map}); 
    drawLayerSite.setStyle({ 
        fillColor: 'rgba(1, 84, 90, 0.5)', 
        fillOpacity: 0.5, 
        strokeWeight: 1, 
        strokeColor: '#01545A', 
        strokeOpacity: 0.8 
    });
    // 添加新数据
    drawLayerSite.addGeoJson(geoJson); 
}

这种方式适合数据量较大的场景，不需要逐个遍历要素，效率更高。

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