使用 Angular Google Maps 将自定义类添加到 agm-marker 的 img答案

【问题标题】：Add custom class to the img of a agm-marker with Angular Google Maps使用 Angular Google Maps 将自定义类添加到 agm-marker 的 img
【发布时间】：2020-06-22 02:40:56
【问题描述】：

我已经设置了一个 Angular 谷歌地图，带有一个 agm-marker 从 json 中提取标记。

此 json 中的某些数据需要标记处于不同的方向，例如上、下、左、右，如箭头。这也通过 JSON 传递。

我设置了我的 agm 标记：

<agm-marker *ngFor="let data of markerCollection;trackBy: eventId; let i = index" 
    [latitude]="data.item.coordinates[1]" [longitude]="data.item.coordinates[0]"
    [iconUrl]="data.item.url" [visible]="data.item.visible" (markerClick)="onMarkerClick(event)">
</agm-marker>

并认为添加

[ngClass]="data.item.direction"

可以将类添加到 img 标签，但不能。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular google-maps angular-google-maps

【解决方案1】：

在研究了实现这一目标的方法后，我意识到只有两种方法，都不太理想：

• 将图像转换为符号，符号属性有一个“旋转”选项可用。

• 为每个方向提供不同的图像并直接在该方向上编码。在这种情况下，我在 item.url 中附加了从 JSON 提要传入的方向，并相应地提供了不同的图像。

【讨论】：