gmaps.js绘制多边形：如何移除重叠旧多边形仅保留最新多边形

嘿，我懂你遇到的困扰——每次调用drawPoly都会在地图上新增一个多边形，旧的还留在原地，导致层层重叠对吧？这是因为你每次调用drawPolygon都会创建一个全新的多边形实例，但之前的实例并没有从地图上移除，只是把oldPolygon设为null，这根本没删掉旧的多边形。

咱们来调整代码，搞定这个问题：

// 把oldPolygon放在全局/合适的作用域，用来保存当前活跃的多边形实例
let oldPolygon = null;
const paths = [];

function drawPoly(p1, p2) {
  paths.push([p1, p2]);
  console.log(paths);
  
  // 核心步骤：如果存在旧的多边形，先从地图上移除它
  if (oldPolygon) {
    oldPolygon.remove();
  }
  
  // 绘制新的多边形，同时把实例赋值给oldPolygon，方便下次移除
  oldPolygon = map.drawPolygon({
    paths: paths,
    strokeColor: '#432070',
    strokeOpacity: 1,
    strokeWeight: 3,
    fillColor: '#432070',
    fillOpacity: 0.6
  });
}

为什么这样有效？ #

gmaps.js的drawPolygon方法会返回一个包含remove()方法的对象，调用这个方法就能彻底把对应的多边形从地图上清除。之前你只是把oldPolygon设为null，这只是切断了变量和旧实例的引用，但旧多边形依然存在于地图上，所以会重叠。现在每次绘制新多边形前，先移除旧的，再创建新的，地图上就只会保留最后生成的那一个了。

另外看你的代码，paths是用来累积点的，所以每次绘制的是基于所有点的完整多边形，这个逻辑和咱们的修改完全匹配，不会影响你原本的累积需求。

内容的提问来源于stack exchange，提问作者Mark A.