Как удалить несколько кругов для карты Google

Question

Я пытаюсь удалить все 4 круга с карты Google одним нажатием кнопки, но в настоящее время я могу удалить только один круг. Может ли кто-нибудь дать мне знать, как я могу удалить несколько кругов одним нажатием кнопки. Извините, я новичок в этом. Заранее спасибо.

Мой код:

   <input onclick="removecircle();" type=button value="Remove line">
    <input onclick="addcircle();" type=button value="Restore line">

<div id="map"></div>
<script>
    var cityCircle;

  var citymap = {
    chicago: {
      center: {lat: 41.878, lng: -87.629},
      population: 2714856
    },
    newyork: {
      center: {lat: 40.714, lng: -74.005},
      population: 8405837
    },
    losangeles: {
      center: {lat: 34.052, lng: -118.243},
      population: 3857799
    },
    vancouver: {
      center: {lat: 49.25, lng: -123.1},
      population: 603502
    }
  };

  function initMap() {
    // Create the map.
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 37.090, lng: -95.712},
      mapTypeId: 'terrain'
    });

    // Construct the circle for each value in citymap.
    // Note: We scale the area of the circle based on the population.
    for (var city in citymap) {
      // Add the circle for this city to the map.
       cityCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100
      });
    }
  }

     function addcircle(){

        cityCircle.setMap(map);
        }

        function removecircle(){

        cityCircle.setMap(null);
        }

Изображение 1

Изображение 2

Answer 1

Вам необходимо хранить ссылки на круги (и карту) в глобальной области видимости (где они будут доступны из функций прослушивания щелчков HTML). Затем обработайте все круги, чтобы добавить или удалить их с карты.

var circles = [];
var map;

function initMap() {
  // Create the map.
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 37.090,
      lng: -95.712
    },
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
    // keep reference to the circle
    circles.push(cityCircle);
  }
}

function addcircle() {
  for (var i = 0; i < circles.length; i++) {
    circles[i].setMap(map);
  }
}

function removecircle() {
  for (var i = 0; i < circles.length; i++) {
    circles[i].setMap(null);
  }
}

подтверждение концепции скрипки

фрагмент кода:

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

<input onclick="removecircle();" type=button value="Remove circles">
<input onclick="addcircle();" type=button value="Restore circles">
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map"></div>
<script>
  var circles = [];
  var map;

  function initMap() {
    // Create the map.
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {
        lat: 37.090,
        lng: -95.712
      },
      mapTypeId: 'terrain'
    });

    // Construct the circle for each value in citymap.
    // Note: We scale the area of the circle based on the population.
    for (var city in citymap) {
      // Add the circle for this city to the map.
      var cityCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100
      });
      circles.push(cityCircle);
    }
  }

  function addcircle() {
    for (var i = 0; i < circles.length; i++) {
      circles[i].setMap(map);
    }
  }

  function removecircle() {
    for (var i = 0; i < circles.length; i++) {
      circles[i].setMap(null);
    }
  }
  google.maps.event.addDomListener(window, 'load', initMap);
    var cityCircle;

  var citymap = {
    chicago: {
      center: {
        lat: 41.878,
        lng: -87.629
      },
      population: 2714856
    },
    newyork: {
      center: {
        lat: 40.714,
        lng: -74.005
      },
      population: 8405837
    },
    losangeles: {
      center: {
        lat: 34.052,
        lng: -118.243
      },
      population: 3857799
    },
    vancouver: {
      center: {
        lat: 49.25,
        lng: -123.1
      },
      population: 603502
    }
  };
</script>