在Angular 5中将用户图像添加到agm-marker

Question

我正在使用 agm-marker 作为角度为5的标记。我想在这样的标记引脚中添加用户图像。

在 agm-marker [ iconUrl ]中提供有限的功能。任何其他建议都会得到满足。

这是模板

<div style="height: 440px" id="result_banner">
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]='7'>
    <agm-marker *ngFor="let data of searchResultData" [latitude]="+data.lat" [longitude]="+data.lng" [iconUrl]="marker">
    </agm-marker>
  </agm-map>
</div>

Answer 1

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

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

Answer 2

您必须在项目中包含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文件中

.online {   边框：3px纯黑色 }