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

【问题标题】：How to make custom arrow mark in agm-map?如何在 agm-map 中制作自定义箭头标记？
【发布时间】：2018-04-01 07:13:18
【问题描述】：

我正在构建一个车辆跟踪应用程序，我正在使用 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>

这里我需要将标记替换为箭头，就像在这张图片中一样，

我需要将标记更改为箭头，就像第二张图片中一样。请帮助我达到预期的效果..

【问题讨论】：

标签： angular google-maps google-maps-api-3 google-maps-markers arrows

【解决方案1】：

接受的答案将不起作用，因为这些不是 agm-marker 的属性。

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

string

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

Symbol: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
    }
}

【讨论】：

你能帮我解决这个问题吗？ stackoverflow.com/questions/52817841/…

【解决方案2】：

您可以使用现有的api并设置iconUrl

<agm-marker
   [latitude]="location.latitude"
   [longitude]="location.longitude"
   [iconAnchorX]="10"
   [iconAnchorY]="10"
   [iconHeight]="20"
   [iconWidth]="20">
   [iconUrl]="location.icon">
 </agm-marker>

【讨论】：

当我添加上面的代码时出现错误Can't bind to 'iconAnchorX' since it isn't a known property of 'agm-marker'.
我的工作代码 ===>
我遇到了同样的错误，比如无法绑定到 'iconAnchorX'，因为它不是 'agm-marker' 的已知属性。

【解决方案3】：

您必须在项目中包含 agm-overlays 然后您才能过度绘制，它还支持在地图上添加自定义 div。

<agm-overlay
          *ngFor="let driver of driversList"
          [latitude]="driver.latitude"
          [longitude]="driver.longitude"
        >
          <div>
            <img
              style="cursor: pointer;"
              [ngClass]="{
                online: driver.status === 'online',
                offline: driver.status === 'offline'
              }"
              src="{{
               driver.profileImageURL
              }}"
            />

          </div>
        </agm-overlay>

在css文件中添加这个

.在线{ 边框：3px 纯黑色 }

【讨论】：