时间戳

首页 > 解决方案 > 使用 Angular 在谷歌地图上更改 agm-circle 的颜色

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

问题描述

我需要通过按下三个不同的按钮来更改两个圆圈的颜色，称为红色、蓝色和绿色。

我有：

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

如何使用按钮更改圆圈颜色

标签： angular

解决方案

您可以通过对.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填充中传递它。

推荐阅读