如何将html添加到angular 2中的agm-marker？
我需要一种方法来定制地图标记的角度2与agm地图。在车辆跟踪应用程序中，我必须通过实时跟踪组件中的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标签一起显示特定的车辆编号)。
回答 5
Stack Overflow用户
发布于 2017-11-03 14:35:15
在将数据绑定到地图之后，我尝试更改标记样式。但它不被agm允许。无论如何，下面的解决方案对我来说是成功的。因为我相信你的数据服务可能能够识别车辆的方向。
因此，您需要使用以下类型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"
- Vehicle向西运行图标名称"270-green-icon.svg"
- Vehicle运行向西北方向图标名称"315-green-icon.svg"
- Vehicle停止并指向西南方向图标名称"225-red-icon.svg"
的
- 车辆
像这样，您必须为每个车辆状态和方向都有一个图标列表。标记Url必须由您从服务中获得的数据确定。
Stack Overflow用户
发布于 2017-11-04 21:06:53
我不知道agm和angular，但使用标准工具Html/js可以相对简单地完成这项工作。
1.)在驾驶目录中从车辆中获取2个坐标。然后使用沿路径显示箭头的可能性，因此为2。)使用箭头设置路径(从给定坐标开始)，并隐藏该路径，以便仅箭头可见。3.)设置一个带有标签indirect (带偏移)的标记到第一个坐标，并且不显示该标记。
附了一辆车的例子。也许你可以使用它或它的一部分。祝你好运，莱因哈德
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
#map {height: 100%;}
html, body {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 18.1, lng: 79.1},
mapTypeId: 'terrain'
});
///// Simple example for one vehicle //////
//define the arrow you will display
var arrowGreen = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
fillColor: 'green',
fillOpacity: 0.8,
};
//set two points in driving direction of vehicle
var dirCoordinates = [
{lat: 18.0935, lng: 79.0741},
{lat: 18.0936, lng: 79.0742},
];
//define a poly with arrow icon (which is displayed in driving directory)
var poly = new google.maps.Polyline({
path: dirCoordinates,
strokeColor: 'green',
strokeOpacity: 0,
strokeWeight: 6,
map: map
});
poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]});
//set the text as marker label without displayinge the marker
var m = new google.maps.Marker({
position: new google.maps.LatLng(dirCoordinates[0]),
label: {
color: 'black',
fontWeight: 'bold',
text: 'TN28 AF 1416',
},
icon: {
url: 'none_marker.png',
anchor: new google.maps.Point(10, -25),
},
map: map
});
//.....
// ..more vehicles
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
https://stackoverflow.com/questions/46860315
复制相似问题
腾讯云开发者
