如何将html添加到角度为2的agm标记？

Question

我需要一种方法来使用agm map自定义Angular 2中的地图标记.在车辆跟踪应用中,我必须通过实时跟踪组件中的agm-marker显示当前的车辆状态.我需要以三种不同的颜色显示标记(例如绿色表示停止运行红色,黄色表示空闲运行),我还需要显示目前车辆行驶的方向.

我搜索了很多地方,但发现只有可以添加到标记的图标,我添加了图标使用iconUrl像,

<agm-map>
    <agm-marker class="mapMarker" *ngFor="let device of devices;"  [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name">
    </agm-marker>
</agm-map>

我的输出就像,

由于这看起来更尴尬,请帮助我显示HTML,代替标记上的那个图标.

我需要输出,如下图所示(标记以及显示特定车辆编号的html标签).

Answer 1

一旦我尝试更改标记样式，在数据绑定到地图后。但这并没有得到股东大会的允许。无论如何，以下解决方案对我来说是成功的。我相信你们的数据服务也许能够识别车辆的方向。

所以你需要有以下类型的 JSON 数据对象数组来生成标记列表。

[
    {
        "latitude": 51.5238224,
        "longitude": -0.2485759,
        "markerUrl": "/assets/images/Map/20-red-icon.svg"
    },
    {
        "latitude": 51.238224,
        "longitude": -0.2485759,
        "markerUrl": "/assets/images/Map/30-green-icon.svg"
    },
    ,
    {
        "latitude": 51.4238224,
        "longitude": -0.2485759,
        "markerUrl": "/assets/images/Map/30-yellow-icon.svg"
    }
]

您应该有多个可以识别车辆方向及其状态的图标。

前任：

• 车辆向北行驶图标名称“0-green-icon.svg”
• 车辆向西行驶图标名称“270-green-icon.svg”
• 车辆向西北行驶图标名称“315-green-icon.svg”
• 车辆停下并驶向西南图标名称“225-red-icon.svg”

像这样，您必须有每个车辆状态和方向的图标列表。标记 URL 必须根据您从服务获取的数据来确定。