Angularのagm-polygonをngForで使う方法
■やりたかったこと
agm/coreのagm-polygonでポリゴン毎にfillColorを変えたかったのでagm-polygonタグでngForを使ってTS側でポリゴンを作成してバインドする
■HTML側
<agm-map [longitude]="135" [latitude]="35" [zoom]="16">
<agm-polygon
*ngFor="let polygon of polygonList"
[fillColor]="polygon.fillColor"
[fillOpacity]="polygon.fillOpacity"
[paths]="polygon.paths"></agm-polygon>
</agm-map>
import { Component, OnInit } from "@angular/core";
import { LatLngLiteral } from "@agm/core/services/google-maps-types";
@Component({
selector: "app-map-sample",
templateUrl: "./map-sample.component.html",
styleUrls: ["./map-sample.component.css"]
})
export class MapSampleComponent implements OnInit {
constructor() {}
polygonList: polygon[];
ngOnInit(): void {
this.polygonList = [];
this.polygonList.push({
fillColor: "red",
fillOpacity: 0.1,
paths: [
{ lat: 34.999, lng: 135 },
{ lat: 35, lng: 134.999 },
{ lat: 35, lng: 135.001 }
]
});
this.polygonList.push({
fillColor: "blue",
fillOpacity: 0.1,
paths: [
{ lat: 35.0, lng: 134.999 },
{ lat: 35.001, lng: 135.0 },
{ lat: 35.001, lng: 135.002 }
]
});
}
}
interface polygon {
fillColor: string;
fillOpacity: number;
paths: Array<LatLngLiteral>;
}
Author And Source
この問題について(Angularのagm-polygonをngForで使う方法), 我々は、より多くの情報をここで見つけました https://qiita.com/TadaMacho/items/bf9a98b2860097e70993著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .