Question

我试图通过单击按钮从Google地图中删除所有4个圆圈，但目前只能删除一个圆圈。谁能让我知道如何单击一下按钮即可一次删除多个圆圈。抱歉，我是新来的。提前致谢。

我的代码：

   <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);
        }

Image 1

Image 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);
  }
}

proof of concept fiddle

代码段：

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>

如何为Google Map删除多个Circle

1 个答案: