Google 地图、圆圈未从地图中移除自身

Question

我每次右键都放一个圈，用户放五个圈后，我想把所有的圈都重置，我用的是circle.setMap(null)但是没有效果，谁能借给我这里有一只手吗？

        google.maps.event.addListener(map, "rightclick", function(event) 
        {
            loadMarkers();

            circle = new google.maps.Circle
            ({
            clickable: false,
            center: event.latLng,
            radius: 1000,       // Convert to meters
            fillColor: '#00FF00',
            fillOpacity: 0.2,
            //map: map
            });

            numOfCircles+=1;

            if(numOfCircles <= 5)
            {
                circle.setMap(map);
            }
            else
            {
                numOfCircles = 0;
                circle.setMap(null);
            }
        });

提前致谢

Answer 1

您只是将最后一个圆圈的地图属性设置为空。您需要保留对它们的所有引用并将它们全部设置为空。

var circles = [];
google.maps.event.addListener(map, "rightclick", function(event) 
{
        var circle = new google.maps.Circle({
          clickable: false,
          center: event.latLng,
          radius: 1000,       // Convert to meters
          fillColor: '#00FF00',
          fillOpacity: 0.2,

        });
        circles.push(circle);

        if(circles.length <= 5)
        {
            circle.setMap(map);
        }
        else
        {
            for (var i=0; i<circles.length; i++) {
                circles[i].setMap(null);
            }
            circles = [];
        }
});

working fiddle

代码片段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var circles = [];
  google.maps.event.addListener(map, "rightclick", function(event) {
    // loadMarkers();

    var circle = new google.maps.Circle({
      clickable: false,
      center: event.latLng,
      radius: 1000, // Convert to meters
      fillColor: '#00FF00',
      fillOpacity: 0.2,
      //map: map
    });
    circles.push(circle);

    if (circles.length <= 5) {
      circle.setMap(map);
    } else {
      for (var i = 0; i < circles.length; i++) {
        circles[i].setMap(null);
      }
      circles = [];
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Google 地图、圆圈未从地图中移除自身

Google Maps, circles not removing themselves from map

google-maps

geometry