如何删除所有形状 Google 地图

Question

我有一个代码可以从 sql 数据库中获取与所选文本相关的位置。对于其中的文本，我有一个按钮 (btn_locations)，其属性按类型（标记、多边形、圆形、矩形和多段线）包含用于在地图上设置相关形状的数据。

直到这一刻在地图上显示形状，当您单击每个按钮时，一切正常。我没有得到的是如何将地图设置为空，删除所有形状。

我的想法是按类型获取地图上显示的形状，并为每个形状（标记、多边形、圆形、矩形和多段线）设置空值，但我不知道如何做。

var btn_map = document.getElementsByClassName('btn_locations');

for (var i=0; i < btn_mapa.length; i++) {
  google.maps.event.addDomListener(btn_map[i], 'click', function() {

    var marker_data = this.getAttribute('data-marker');
    var polyline_data = this.getAttribute('data-polyline');
    var rectangle_data = this.getAttribute('data-rectangle');
    var circle_data = this.getAttribute('data-circle');
    var polygon_data = this.getAttribute('data-polygon');

    if (marker_data != '') {
      var markers = (new Function("return [" + marker_data + "];")());
      for (var k = 0; k < markers.length; k++) {
        var marker = new google.maps.LatLng(markers[k].lat, markers[k].lng);
        markers[k] = new google.maps.Marker({
          position: marker,
          map: map,
          }
        });
      }   
    } 

    if (polyline_data != '') { 
      var polylines = (new Function("return [" + polyline_data + "];")());
      for (var k = 0; k < polylines.length; k++) {
        var polyline = new google.maps.Polyline({
          path: polylines[k],
          geodesic: true,
          strokeColor: '#fbb03b',
          strokeOpacity: 0.8,
          strokeWeight: 5
        });
        polyline.setMap(map);
      }
    }

    if (rectangle_data != '') {
      var rectanglesBounds = (new Function("return [" + rectangle_data + "];")());
      for (var k = 0; k < rectanglesBounds.length; k++) {           
        var rectangle = new google.maps.Rectangle({
          strokeColor: '#fbb03b',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#fbb03b',
          fillOpacity: 0.35,
          bounds: rectanglesBounds[k]
        });
          rectangle.setMap(map);
      }
    }

    if (circle_data != '') {
      var circles = (new Function("return [" + circle_data + "];")());
      for (var k = 0; k < circles.length; k++) {
        var circle = new google.maps.Circle({
          strokeColor: '#fbb03b',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#fbb03b',
          fillOpacity: 0.35,
          center: circles[k].center,
          radius: circles[k].radius
        });
          circle.setMap(map);
      }
    }

    if (polygon_data != '') {
      var polygons = (new Function("return [" + polygon_data + "];")());
      for (var k = 0; k < polygons.length; k++) {
        var polygon = new google.maps.Polygon({
          paths: polygons[k], 
          strokeColor: "#fbb03b",
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#fbb03b',
          fillOpacity: 0.35
        });
        polygon.setMap(map);
      }
    } 

  });
}

var btn_clear_all= document.getElementsById('btn_clear');

google.maps.event.addDomListener(btn_clear_all, 'click', function() {
//delete all shapes shown at map
});

Answer 1

我是通过在每个类型中添加一个x.push(类型)得到的

        if (circle_data != '') {
          var circles = (new Function("return [" + circle_data + "];")());
          for (var k = 0; k < circles.length; k++) {
            var circle = new google.maps.Circle({
              map: map,
              strokeColor: '#fbb03b',
              strokeOpacity: 0.8,
              strokeWeight: 1,
              fillColor: '#fbb03b',
              fillOpacity: 0.35,
              center: circles[k].center,
              radius: circles[k].radius
            });
            gcircles.push(circle);
          }
        }

然后为他们设置地图为空：

var gmarkers = [];
var gpolylines = [];
var grectangles = [];
var gcircles = [];
var gpolygons = [];

var btn_clear_all = document.getElementsByClassName('btn_clear');
for (var i=0; i < btn_clear_all .length; i++) {
    google.maps.event.addDomListener(btn_clear_all[i], 'click', function() {            

        for (k = 0; k < gmarkers.length; k++) {
            gmarkers[k].setMap(null);
        }
        for (k = 0; k < gpolylines.length; k++) {
            gpolylines[k].setMap(null);
        }
        for (k = 0; k < grectangles.length; k++) {
            grectangles[k].setMap(null);
        }
        for (k = 0; k < gcircles.length; k++) {
            gcircles[k].setMap(null);
        }
        for (k = 0; k < gpolygons.length; k++) {
            gpolygons[k].setMap(null);
        }
    });
}

如何删除所有形状 Google 地图

How to delete all shapes Google Maps

javascript

google-maps

google-maps-api-3