Angular升级后调用Google Maps containsLocation报警告致系统卡顿求助

升级Angular及相关依赖后，调用google.maps.geometry.poly.containsLocation()时控制台弹出大量警告，直接导致系统卡顿。当前用于检查多边形相交的代码及依赖配置如下：

问题代码 #

isPolygonIntersect(poly1: google.maps.LatLng[] | google.maps.LatLngLiteral[], poly2: google.maps.LatLng[] | google.maps.LatLngLiteral[]): boolean {
  let isIntersect: boolean = false;
  let mainPolygon = new google.maps.Polygon({paths:poly1});

  poly2.forEach((literal: google.maps.LatLng | google.maps.LatLngLiteral) => {
    console.log('isPolygonIntersect', literal, mainPolygon);
    if(google.maps.geometry.poly.containsLocation(literal, mainPolygon)) {
      isIntersect = true;
    }
  });
  let secondPolygon = new google.maps.Polygon({paths:poly2});
  poly1.forEach((literal: google.maps.LatLng | google.maps.LatLngLiteral) => {
    if(google.maps.geometry.poly.containsLocation(literal, secondPolygon)) {
      isIntersect = true;
    }
  });
  return isIntersect;
}

依赖配置 #

"@angular/cli": "~16.1.3",
"@angular/compiler-cli": "^16.1.0",
"@angular/cdk": "^16.1.4",
"@angular/common": "^16.1.0",
"@angular/google-maps": "^16.1.4",
"@types/google.maps": "^3.53.4",
"jasmine-core": "~4.6.0",
"@types/node": "^12.11.1",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~5.1.3"

问题原因 #

1. 警告根源：创建Polygon对象时未关联地图实例（map参数），Google Maps会针对未渲染的多边形抛出精度警告，大量这类警告会占用控制台资源，引发卡顿。
2. 性能冗余：原代码遍历所有点才返回结果，即使已经找到相交点仍会继续执行；且未清理创建的Polygon对象，可能导致内存泄漏。
3. 逻辑缺陷：仅检查多边形的顶点是否在对方内部，无法覆盖两个多边形交叉但无顶点落入内部的场景。

解决方案 #

1. 消除警告并优化性能

创建Polygon时关联地图实例并设置为不可见，同时找到相交点后立即终止循环，避免冗余计算：

isPolygonIntersect(poly1: google.maps.LatLng[] | google.maps.LatLngLiteral[], poly2: google.maps.LatLng[] | google.maps.LatLngLiteral[], map: google.maps.Map): boolean {
  // 创建不可见多边形，关联地图消除警告
  const mainPolygon = new google.maps.Polygon({
    paths: poly1,
    visible: false,
    map: map
  });

  // 遍历poly2的点，找到相交点直接返回
  for (const point of poly2) {
    if (google.maps.geometry.poly.containsLocation(point, mainPolygon)) {
      mainPolygon.setMap(null); // 清理资源
      return true;
    }
  }

  const secondPolygon = new google.maps.Polygon({
    paths: poly2,
    visible: false,
    map: map
  });

  // 遍历poly1的点，找到相交点直接返回
  for (const point of poly1) {
    if (google.maps.geometry.poly.containsLocation(point, secondPolygon)) {
      mainPolygon.setMap(null);
      secondPolygon.setMap(null);
      return true;
    }
  }

  // 补充检查多边形边界是否相交，覆盖交叉无顶点落入的场景
  if (google.maps.geometry.poly.intersects(poly1, poly2)) {
    mainPolygon.setMap(null);
    secondPolygon.setMap(null);
    return true;
  }

  // 清理资源
  mainPolygon.setMap(null);
  secondPolygon.setMap(null);
  return false;
}

2. 额外优化建议

• 确保Google Maps API加载时包含geometry库，URL需带有&libraries=geometry参数；
• 若多边形数据频繁复用，可缓存创建好的Polygon对象，减少重复实例化；
• 调用完成后务必执行setMap(null)释放Polygon资源，避免内存泄漏。

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