使用 Angular 在谷歌地图上更改 agm-circle 的颜色答案

【问题标题】：Change color of an agm-circle on google maps with Angular使用 Angular 在谷歌地图上更改 agm-circle 的颜色
【发布时间】：2020-07-17 22:13:33
【问题描述】：

我需要通过三个不同的按钮来改变两个圆圈的颜色，分别是红色、蓝色和绿色。

我有：

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;
}

How to change circles color with buttons

【问题讨论】：

你得到什么错误？
我没有任何错误，我只需要知道如何添加这些按钮并更改颜色
所以你想在点击时改变两个圆圈的颜色？
成功了吗？？

标签： angular

【解决方案1】：

您可以通过在.html 文件和.ts 文件中进行几处更改来做到这一点

首先我们需要在.html文件中制作3个按钮，如下所示

<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填充而不是直接提供颜色。

【讨论】：