时间戳

首页 > 解决方案 > 从打字稿改变Angular Map svg标记的颜色

angular - 从打字稿改变Angular Map svg标记的颜色

问题描述

我有一个项目，其中包括角度谷歌地图（agm-map），我想使用 Just ONE svg 图标并更改该图标的颜色来可视化不同类型的标记（不同数据）。我的问题是如何更改 svg 标记的颜色并将其从打字稿传递给 html(agm-marker tag )，这是 agm-marker 的样子：

<agm-map [latitude]="mapLat" [longitude]="mapLng" [zoom]="mapZoom">
        <agm-marker-cluster imagePath="imagePath">
            <agm-marker *ngFor="let m of markers; let i = index"
                        [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [iconUrl]="m.icon" [title]="m.title">
            </agm-marker>
        </agm-marker-cluster>
</agm-map>

我正在从打字稿文件传递标记，据我所知，agm-marker 没有颜色属性来从 html 文件和打字稿中更改它，我尝试了如何在 Google Maps API v3 中使用 SVG 标记的解决方案。我传递了 svg 内容以及一些修改并在 typescript 中更改了颜色，并作为 iconUrl 传递给了 html。但它没有显示 svg 标记，就像它是不可见的而不是空的一样！

标签： angularsvggoogle-maps-markers

解决方案

AGM Marker 指令没有公开修改 SVG 的方法，但是有一个IconUrl属性来替换标准图标，从而允许您通过图标替换使用不同的颜色。您可以捕获原始 SVG，在编辑器中打开，重新着色，保存并放置在您的资产文件夹中，以便通过绑定有条件地使用。

推荐阅读