typescript 如何将 html 添加到 angular 2 中的 agm 标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46860315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add html to a agm-marker in angular 2?
提问by Maniraj Murugan
I need a way to customize the map marker in Angular 2 with agm map. In a vehicle tracking application I have to display the vehicle status at present via agm-marker in live tracking component. I need to display the marker in three different colors (say green for running red for stopped and yellow for idle) and also I need to show the way of direction the vehicle travelling at present.
我需要一种使用 agm 地图自定义 Angular 2 中的地图标记的方法。在车辆跟踪应用程序中，我必须通过实时跟踪组件中的 agm-marker 显示当前车辆状态。我需要以三种不同的颜色显示标记（说绿色代表停止，红色代表停止，黄色代表空闲），并且我还需要显示车辆当前行驶的方向。
I searched many places, but found only icons which can be added to the marker and I added icon using iconUrllike,
我搜索了很多地方，但只找到了可以添加到标记中的图标，我使用iconUrllike添加了图标，
<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>
And my output is like,
我的输出就像，
As this looks more awkward, kindly help me to display HTML, in place of that icon on the marker.
由于这看起来更尴尬，请帮助我显示 HTML，代替标记上的那个图标。
I am in the need of output exactly like in the below image(Marker along with html label showing that particular vehicle number).
我需要完全如下图所示的输出（标记以及显示该特定车辆编号的 html 标签）。
回答by Janith Widarshana
Once I have tried to change marker style, after data bind to the map. But it did not allowed by agm. Anyway following solution successed for me. As I believe your data service may be able to identify the direction of vehicle.
一旦我尝试更改标记样式，在数据绑定到地图之后。但是 agm 不允许。无论如何，以下解决方案对我来说是成功的。因为我相信您的数据服务可能能够识别车辆的方向。
So You need to have the following kind of a JSON data object array for generate marker list.
因此，您需要具有以下类型的 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"
}
]
You should have multiple icons which can identify direction of a vehicle and it's status.
您应该有多个图标可以识别车辆的方向及其状态。
Ex:
前任：
- Vehicle running to north icon name "0-green-icon.svg"
- Vehicle running to west icon name "270-green-icon.svg"
- Vehicle running to north-west icon name "315-green-icon.svg"
- Vehicle stoped and directed to south-west icon name "225-red-icon.svg"
- 车辆向北行驶图标名称“0-green-icon.svg”
- 车辆向西行驶图标名称“270-green-icon.svg”
- 车辆运行到西北图标名称“315-green-icon.svg”
- 车辆停下并指向西南图标名称“225-red-icon.svg”
like this, you must have a list of icons for each vehicle status and direction. Marker Url must dicide by the data which you are getting from the sevice.
像这样，您必须有每个车辆状态和方向的图标列表。标记 Url 必须由您从服务中获得的数据决定。
回答by ReFran
I don't know agm and angular, but with the standard tools Html/js you can do it relative simple.
我不知道 agm 和 angular，但是使用标准工具 Html/js，您可以相对简单地做到这一点。
1.) Get 2 coordinates from the vehicle in driving directory. Then use the possibility to show an arrow along a path, so 2.) Set up a path (from the given coords) with an arrow, and hide the path so only the arrow is visible. 3.) Set up a marker with label indirect (with offset) to the first coord and don't display the marker.
1.) 从驾驶目录中的车辆获取 2 个坐标。然后使用沿路径显示箭头的可能性，因此 2.) 使用箭头设置路径（从给定的坐标），并隐藏路径，以便只有箭头可见。3.) 在第一个坐标上设置一个带有间接标签（带有偏移量）的标记，并且不显示该标记。
Attached an example for one vehicle. Perhaps you can use that or parts of it. Good luck , Reinhard
附上一辆车的例子。也许你可以使用它或它的一部分。祝你好运，莱因哈德
<!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>回答by Вова Савчук
This is not a problem of AGM, it's a problem of google maps API, which does not allow you to use HTML for marker, so only images. :( There is some workarounds for creating custom HTML markers like that, but unfortunately custom layers are not supported by AGM yet (ticket). So looks like if you really need this, you will have to implement custom marker by yourself, using custom google overlays without AGM.
这不是 AGM 的问题，而是 google maps API 的问题，它不允许您使用 HTML 作为标记，因此只能使用图像。:(没有用于创建自定义的HTML标记像一些解决方法是，但不幸的是定制层不被AGM尚不支持（票）。如此看来，如果你真的需要这一点，你必须自己实现自定义标记，使用自定义谷歌没有 AGM 的叠加。
回答by Ajinkya Sarnaik
you can always add
你可以随时添加
eg
例如
<agm-marker [iconUrl]="icon.url" [latitude]="icon.latitude" [longitude]="icon.longitude"></agm-marker>
if you want anything else like a circle
如果你想要其他任何东西，比如一个圆圈
https://angular-maps.com/api-docs/agm-core/directives/agmcircle#info
https://angular-maps.com/api-docs/agm-core/directives/agmcircle#info
or
或者
<agm-circle *ngFor="data in circles"
[latitude]="data.lat"
[longitude]="data.lng"
[circleDraggable]="true"
[editable]="true"
[fillColor]="'data.color'"
[radius]="data.radius"
>
</agm-circle>
or square
或正方形
回答by Falci
I have a workaround that you can use in case you don't find a better solution:
如果您找不到更好的解决方案，我有一个您可以使用的解决方法：
Why don't you create a new marker image, with a transparent background and a bottom margin? And you can use the same code you posted in the question.
为什么不创建一个具有透明背景和底部边距的新标记图像？您可以使用您在问题中发布的相同代码。
Exaggerated example https://imgur.com/NLyxyTB.png
