根据缩放级别添加或删除多边形

Question

我正在尝试根据 Google 地图中的缩放级别添加和删除多边形。 这是我用来检测缩放更改以添加或删除多边形的内容。

google.maps.event.addListener(map, 'zoom_changed', function () {
    if (map.getZoom() <= 13) {
        polygons.setMap(null);
    } else {
        polygons.setMap(map);
    }
});

问题是只添加了一个多边形，而只删除了一个多边形。 总共有3个多边形。 如果删除zoom_changed事件侦听器，则所有多边形都会显示正常，但我无法根据缩放更改删除它们。

放大一次以查看多边形。 缩小两次以移除多边形。

JSFiddle 可以在这里看到： http : //jsfiddle.net/pc7tux02/5/

Answer 1

您只显示和隐藏代码中的最后一个多边形。 该解决方案基于多边形数组和用于显示或隐藏所有多边形的 for cicle。 有关完整功能版本，请参阅此jsfiddle 。

这些是主要部分摘录

var polygons = [] ;
var poly;
............

for (var j = 0; j < coords.length; j++) {
        var pt = new google.maps.LatLng(coords[j][1], coords[j][0]);
        bounds.extend(pt);
        path.push(pt);
    }
    poly = new google.maps.Polygon({
    path: path,
    strokeColor: "#FF0000",
    strokeOpacity: 5,
    strokeWeight: 5,
    fillColor: "#FF0000",
    fillOpacity: 0.5
});
polygons.push(poly);
path = [];

}

.........

 google.maps.event.addListener(map, 'zoom_changed', function () {
    if (map.getZoom() <= 13) {
        for (var k = 0; k < polygons.length; k++){
           polygons[k].setMap(null);
        }
    } else {
          for (var k = 0; k < polygons.length; k++){
           polygons[k].setMap(map);
        }     
    }
});

Answer 2

问题是您的polygons仅存储应用程序中的最后一个多边形。 相反，将它变成一个数组，并在您想要更新它时使用.foreach循环遍历您的数组。

演示： http : //jsfiddle.net/9vLcbm04/