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

【问题标题】：Add user image to agm-marker in Angular 5在Angular 5中将用户图像添加到agm-marker
【发布时间】：2018-11-21 14:04:26
【问题描述】：

我正在使用 agm-marker 作为 angular 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>

【问题讨论】：

试试这个[iconUrl]='{"url": marker,"scaledSize": {"height": 10, "width": 10}}'
@hrdkisback 您的建议有效！谢谢??????

标签： angular google-maps icons google-maps-markers

【解决方案1】：

您必须在项目中包含 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 纯黑色 }

【讨论】：

您可以使用此图标或图标作为带有图标 png 的 url。在这种情况下，您需要创建此图标。不知道你有没有。如果不使用叠加层很容易，因为您可以仅使用 css 来创建此元素，并在其上添加背景图像和个人资料图片。另一件需要关注的事情是，如果你有很多图标，哪一个的性能更好。也许不是你的问题。另外，如果你有很多，可以一起使用@agm/js-marker-clusterer。

【解决方案2】：

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

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

【讨论】：

<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]="{ url: 'marker', scaledSize: [10,10], origin: [0,0], anchoriconAnchor: [7,7] }"> </agm-marker> </agm-map> </div>
url 只取图片 url 不传其他参数
然后我将代码稍微更改为[iconUrl]="{ url: 'marker', scaledSize: [10,10], origin: [0,0], iconAnchor: [7,7] }"。那么它给出的错误 scalesize is not a size and height is not a number.
让我们continue this discussion in chat.
试试这个[iconUrl]='{"url": marker,"scaledSize": {"height": 10, "width": 10}}'