Question

犯了语法错误，我无法理解在哪里。请检查以下代码。

<agm-marker *ngFor="let d of devices" [iconUrl]="'http://chart.apis.google.com/chartchst=d_map_pin_letter&chld=%E2%80%A2|'+ (d.status=='1')? '#008000' : '#ff0000'"
[latitude]="d.latitude" [longitude]="d.longitude">
</agm-marker>

Answer 1

您可以通过将属性传递到标记本身来修改标记的颜色。（检查“标签”道具）

<agm-marker *ngFor="let d of devices" [iconUrl]="'http://chart.apis.google.com/chartchst=d_map_pin_letter&chld=%E2%80%A2'"
[latitude]="d.latitude" [longitude]="d.longitude"
[label]="{ color: (d.status=='1')? '#008000' : '#ff0000', // Label
fontWeight: 'bold', text: (i + 1).toString() }"
>
</agm-marker>

Answer 2

我在打字稿文件中解决了该问题，在其中选择了要使用的图标：

if (status === 'online' ) {
   this.markers[i].icon =  {
      url: '/assets/images/online.svg',
      scaledSize: {
         width: 30,
         height: 40
      }
   };
}
if (status === 'offline' ) {
   this.markers[i].icon =  {
      url: '/assets/images/offline.svg',
      scaledSize: {
         width: 30,
         height: 40
      }
    };
 }

然后我将marker.icon传递给iconUrl，如下所示：

<agm-marker  *ngFor="let marker of markers"
   [latitude] = "marker.lat"
   [longitude] = "marker.lon"
   [iconUrl] = "marker.icon"
   [title] = "marker.title"
><agm-marker>

这是一种务实的解决方法...

如何根据条件更改角度地图标记的颜色？

2 个答案: