Angular 2 google地图，单击多边形时更改多边形颜色

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

<div id="map"></div>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-map',
  template: '<div id="map"></div>'
})
export class MapComponent implements AfterViewInit {
  @ViewChild('map', { static: false }) mapElement: ElementRef;

  map: google.maps.Map;

  ngAfterViewInit() {
    const mapOptions: google.maps.MapOptions = {
      center: { lat: 37.7749, lng: -122.4194 },
      zoom: 12
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
}

ngAfterViewInit() {
  // 创建多边形
  const polygon = new google.maps.Polygon({
    paths: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    editable: true  // 允许编辑多边形
  });

  // 将多边形添加到地图上
  polygon.setMap(this.map);

  // 添加单击事件监听器
  polygon.addListener('click', () => {
    // 更改多边形的颜色
    polygon.setOptions({
      strokeColor: '#00FF00',
      fillColor: '#00FF00'
    });
  });
}