如何在Angular Google Maps组件中获取触发事件的圆形实例引用

安全阿岳

2026-7-18

解决方案

针对你遇到的Angular Google Maps组件中centerChanged和radiusChanged事件$event为undefined的问题，可以通过以下步骤解决：

1. 修改模板，传递组件实例和模型项

给每个<map-circle>添加模板引用变量，并在事件触发时将组件实例和对应的模型对象一起传入处理方法：

<map-circle *ngFor="let c of ConCircles"
            #circleRef
            [center]="c.center"
            [options]="c.options"
            [radius]="c.radius"
            (centerChanged)="handleCenterChanged(circleRef, c)"
            (radiusChanged)="handleRadiusChanged(circleRef, c)">
</map-circle>

2. 在组件类中实现事件处理方法

导入MapCircle组件类，通过组件实例的googleMapCircle属性获取原生Google Maps Circle对象，从中提取最新的中心坐标和半径，并更新到你的模型中：

首先导入依赖：

import { MapCircle } from '@angular/google-maps';

然后实现处理方法：

handleCenterChanged(circleComponent: MapCircle, circleModel: any) {
  // 获取原生Google Maps Circle实例
  const nativeCircle = circleComponent.googleMapCircle;
  if (!nativeCircle) return;

  // 获取最新中心坐标并更新模型
  const newCenter = nativeCircle.getCenter();
  circleModel.center = {
    lat: newCenter.lat(),
    lng: newCenter.lng()
  };
}

handleRadiusChanged(circleComponent: MapCircle, circleModel: any) {
  const nativeCircle = circleComponent.googleMapCircle;
  if (!nativeCircle) return;

  // 获取最新半径并更新模型
  circleModel.radius = nativeCircle.getRadius();
}

3. 优化模型类型（可选）

为了类型安全，建议给ConCircles定义明确的接口：

interface CircleModel {
  center: google.maps.LatLngLiteral;
  options: google.maps.CircleOptions;
  radius: number;
}

// 初始化数组
ConCircles: CircleModel[] = [];