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

【问题标题】：How to display custom DOM element in particular position of agm-map如何在 agm-map 的特定位置显示自定义 DOM 元素
【发布时间】：2019-03-09 13:09:02
【问题描述】：

我将在我的 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>

【问题讨论】：

我只在你的输出中看到---。你想要一个自定义图标而不是原生标记？
是的。我不仅想显示自定义图标，还想显示我提到的特定元素，这意味着我想编辑 imgs 或图标的样式，如边框半径和边距。
在 agm-marker 中只有大小等属性，没有详细样式

标签： html css angular google-maps

【解决方案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 文件中，您将拥有所有属性。要了解有关如何使用地图中的图标和颜色自定义地图的更多信息，请查看此 repo： https://github.com/devpato/SOSmap

【讨论】：

嗨。感谢您的回复我检查了回购但没有任何代码来设置 agm-marker 的样式。我想编辑图标的样式，如边框半径、边框颜色、边距等。我怎样才能改变风格。如果在 agm-marker 中不可能，你能用其他方式解决这个问题吗？