Angular2谷歌地图circleRedim触发后无法获取圆形半径问题咨询

原方案失败原因 #

1. 事件绑定方案未接收radiusChanged事件自带的最新半径参数，无法直接取值
2. ViewChild方案未指定读取目标为MapCircle组件实例，拿到的默认是DOM元素引用，也不知道原生谷歌地图Circle实例存放在组件的circle属性下

可行方案1：通过radiusChanged事件直接取值 #

这是最简单的方案，radiusChanged事件触发时会自动携带最新的半径值作为入参：

模板代码 #

<map-circle
  (radiusChanged)="circleRedim($event)"
  [center]="center" 
  [options]="circleOptions"
>
</map-circle>

组件代码 #

circleRedim(newRadius: number) {
  // 直接打印调整后的最新半径
  console.log(newRadius)
}

可行方案2：通过ViewChild获取组件实例读取/监听半径 #

如果需要随时获取半径或者绑定更多原生事件，可以用这个方案：

模板代码 #

<map-circle #circleRef
  [center]="center" 
  [options]="circleOptions"
>
</map-circle>

组件代码 #

首先需要导入MapCircle类型：

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

组件内获取实例：

// 显式指定读取MapCircle组件实例
@ViewChild('circleRef', { read: MapCircle }) circleRef: MapCircle;

ngAfterViewInit() {
  // 获取原生谷歌地图Circle实例
  const nativeCircle: google.maps.Circle = this.circleRef.circle;
  // 直接读取当前半径
  console.log(nativeCircle.getRadius());

  // 也可以绑定原生的radius_changed事件监听变化
  nativeCircle.addListener('radius_changed', () => {
    console.log('调整后的半径：', nativeCircle.getRadius());
  })
}

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