如何在agm-map的特定位置显示自定义DOM元素

Question

我将在我的angular6项目的agm-map中显示自定义dom。当我使用agm-marker时，我只能显示特定的图标和标签。我想要显示的内容如下：

​

.user-location i {
  opacity: 0.7;
}
.user-location img {
  border-radious: 100%;
}
...

<a class="user-location">
  <i class="pin-icon"></i>
  <figure>
    <img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
  </figure>
  ...
</a>

​

Answer 1

我已经通过以下方式更改了标记：

<agm-map [latitude]="lat" [longitude]="lng"  [styles]="mapStyle === 'dark' ? styleDark : styleLight">
            <div  *ngFor="let marker of markers;">
                <agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>           
                </agm-marker>
            </div>
        </agm-map>

如果您还想自定义地图，可以执行以下操作：

[styles]="mapStyle === 'dark' ? styleDark : styleLight"

在ts文件中，您将拥有所有属性。要了解有关如何在地图中使用图标和颜色自定义地图的更多信息，请查看以下存储库：https://github.com/devpato/SOSmap