如何移除Google Map API中的Polygon与MapLabel标签

我使用Google Maps API实现用户绘制Polygon功能，同时通过maplabel库显示各边长度和面积，但点击移除按钮时，Polygon和对应的MapLabel标签无法正常从地图中清除。

代码实现 #

HTML #

<button id="enablePolygon">draw</button>
<button id="removePolygon">remove</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/js-map-label@1.0.1/src/maplabel.js"></script>

JavaScript #

var labels = [];
var allOverlays = [];
var selectedShape; // 显式声明全局选中变量

function setSelection(shape) {
  selectedShape = shape;
  shape.setEditable(true);
}

function initMap() {
  var options = {
    zoom: 14,
    center: {
      lat: 52.250618,
      lng: 20.9774
    }
  };

  var map = new google.maps.Map(document.getElementById("map"), options);

  var drawingManager = new google.maps.drawing.DrawingManager({
    polygonOptions: {
      draggable: false,
      fillColor: "#0e97fa",
      fillOpacity: 0.2,
      strokeWeight: 2,
      strokeColor: "#0e97fa",
      editable: true,
      zIndex: 1
    },
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    map: map,
    drawingMode: 'polygon'
  });

  function attachPolygonInfoWindow(polygon) {
    // 先清除该多边形已有的标签
    if (polygon.labels) {
      polygon.labels.forEach(label => label.setMap(null));
    }
    polygon.labels = [];
    
    var path = polygon.getPath();
    var points = path.getArray();
    var area = google.maps.geometry.spherical
      .computeArea(path.getArray())
      .toFixed(0);
    var bounds = new google.maps.LatLngBounds();

    points.forEach(point => bounds.extend(point));

    var boundsCenter = bounds.getCenter();
    var centerLabel = new MapLabel({
      map: map,
      position: boundsCenter,
      fontSize: 14,
      align: "center",
      zIndex: 3
    });
    polygon.labels.push(centerLabel);

    centerLabel.set("position", bounds.getCenter());
    centerLabel.set("text", area + " m2");
    
    if (path.getLength() < 2) return;
    
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      var start = polygon.getPath().getAt(i);
      var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
      var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
      var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
      
      var sideLabel = new MapLabel({
        map: map,
        fontSize: 14,
        align: "center",
        zIndex: 3
      });
      sideLabel.set("position", sideCenter);
      sideLabel.set("text", sideLength.toFixed(2) + "m");
      polygon.labels.push(sideLabel);
    }
  }

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
    allOverlays.push(e);

    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      drawingManager.setDrawingMode(null);

      var newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, "click", function() {
        setSelection(newShape);
      });

      if (newShape.type == "polygon") {
        var path = newShape.getPath();

        google.maps.event.addListener(path, "insert_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        google.maps.event.addListener(path, "set_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        attachPolygonInfoWindow(newShape);
      }

      setSelection(newShape);
    }
  });

  var enablePolygon = document.getElementById('enablePolygon');
  enablePolygon.addEventListener('click', function(){
    drawingManager.setMap(map);
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

  var removePolygon = document.getElementById('removePolygon');
  removePolygon.addEventListener('click', function(){
    if (!selectedShape) return; // 无选中图形时直接返回
    
    // 清除该多边形关联的所有标签
    selectedShape.labels.forEach(label => label.setMap(null));
    // 移除多边形
    selectedShape.setMap(null);
    // 重置选中状态
    selectedShape = null;
    // 可选：如果需要关闭绘制模式
    drawingManager.setDrawingMode(null);
  });
}

initMap();

问题修复说明 #

• 显式声明selectedShape全局变量，避免隐式全局导致的访问问题
• 移除按钮逻辑中，先遍历选中多边形的labels数组，逐个调用setMap(null)清除标签，再移除多边形本身
• 删除无效的centerLabel.setRemoveLabel(true)调用（maplabel库无此方法）
• 优化attachPolygonInfoWindow中的标签清除逻辑，确保更新多边形时旧标签被正确移除

内容的提问来源于stack exchange，提问作者Jayzz