Изменить цвет agm-круга на картах Google с помощью Angular

Question

Мне нужно изменить цвет обоих кругов, нажав три разные кнопки, называемые Красной, Синей и Зеленой.

У меня есть:

app.module.ts

import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Imposta qui le tue api key
     AgmCoreModule.forRoot({apiKey: 'GOOGLE_MAPS_API'}),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'map server';

  lat: number = 45.464198;
  lng: number = 9.190545;

  lat2: number = 45.464198;
  lng2: number = 9.190545;
}

app.component. html

{{title}}
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng" >
  </agm-marker>

  <agm-circle [latitude]="lat" [longitude]="lng"
      [radius]="5000"
      [fillColor]="'red'">
  </agm-circle>

  <agm-circle [latitude]="lat2" [longitude]="lng2"
      [radius]="7000"
      [fillColor]="'green'">
  </agm-circle>

</agm-map>

и

app.component. css

agm-map
{
  height: 600px;
}

Как изменить цвет окружностей с помощью кнопок

Answer 1

Вы можете сделать это, внеся несколько изменений в файл .html и .ts файл

Прежде всего нам нужно сделать 3 кнопки в файле .html, как показано ниже

<input type="button" value="Red" (click)="onColor('red')">
<input type="button" value="Blue" (click)="onColor('blue')">
<input type="button" value="Green" (click)="onColor('green')">

Теперь вам нужно создать функцию в .ts файле

export class AppComponent {
  circleColor: string;
  title = 'map server';

  lat: number = 45.464198;
  lng: number = 9.190545;

  lat2: number = 45.464198;
  lng2: number = 9.190545;

  onColor(color){
    circleColor = color;
  }
}

И теперь, наконец, вам нужно внести небольшие изменения в agm-circle, например:

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng" >
  </agm-marker>

  <agm-circle [latitude]="lat" [longitude]="lng"
      [radius]="5000"
      [fillColor]="circleColor ">
  </agm-circle>

  <agm-circle [latitude]="lat2" [longitude]="lng2"
      [radius]="7000"
      [fillColor]="circleColor ">
  </agm-circle>

</agm-map>

Вместо того, чтобы давать цвет напрямую, мы передадим его из .ts fill.