angular - 如何在 agm-map 中制作自定义箭头标记？

Question

我正在构建一个车辆跟踪应用程序，我正在使用 agm-map-marker 来显示图像中这样定位的车辆，

Livetracking.component.html 代码是，

<agm-map #gm [latitude]="lat" [longitude]="lng" [(zoom)]="zoom" [mapTypeControl]="true">
            <agm-marker class="mapMarker" *ngFor="let device of devices;"
                [latitude]="device.latitude" [longitude]="device.longitude"
                (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow;mapMarkerInfo(m);">
            </agm-marker>
</agm-map>

这里我需要把标记替换成箭头，就像这张图一样，

我需要将标记更改为箭头，如第二张图片所示。请帮助我达到预期的结果。

Answer 1

接受的答案将无效，因为它们不是 agm-marker 的属性。

在 iconUrl 属性中，您可以使用以下任何类型:

字符串

图标:https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Icon

符号:https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Symbol

例如，要使用具有所需大小的自定义图像标记(在本例中为 SVG)，您可以在 [iconUrl] 属性中使用此对象:

{
    url: './assets/images/blue-marker.svg',
    scaledSize: {
        width: 40,
        height: 60
    }
}