Question

我将在我的angular6项目中将自定义dom显示到agm-map中。使用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

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

1 个答案: