如何将html添加到角2中的agm-marker？

我需要一种方法来使用agm map自定义Angular 2中的地图标记。在车辆追踪应用程序中，我必须通过实时追踪组件中的agm-marker来显示车辆状态。我需要以三种不同的颜色显示标记（比如绿色表示停止运行红色，空闲时表示黄色），还需要显示目前车辆行驶的方向。如何将html添加到角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标签，显示特定的车辆号码）。

来源

2017-10-21 Mani Raj

看看[这个图书馆]（https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel）。 – MrUpsidown

你有没有尝试前面提到的图书馆？如果你还在遇到问题请发布示例代码，再现您的问题。 – henrisycip

一次，我已经试图改变标记样式，数据绑定到地图。但它不允许通过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 - 绿 - icon.svg”
车辆行驶到西图标名称“270 - 绿 - icon.svg”
车辆运行西北部图标名称“315 - 绿 - icon.svg”
车辆采空，并引导到西南图标名称“225 - 红 - icon.svg”

这样，你必须有每个车辆状态和方向的图标列表。标记网址必须通过您从服务中获取的数据来自杀。

来源

2017-11-03 14:35:14

我不知道agm和angular，但用标准工具Html/js可以做到它相对简单。

1.）在驾驶目录中获取车辆的2个坐标。然后使用沿着路径显示箭头的可能性，所以 2.）用箭头设置一个路径（从给定的坐标），并隐藏路径，这样只有箭头可见。 3.）设置一个间接标记（带偏移量）的标记到第一个坐标系，但不显示标记。

附加一辆车的例子。也许你可以使用它或其中的一部分。祝你好运，莱因哈德

<!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' 
 
     }); 
 

 
\t \t ///// Simple example for one vehicle ////// 
 
\t \t //define the arrow you will display 
 
\t \t var arrowGreen = { 
 
\t \t \t path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
 
\t \t \t fillColor: 'green', 
 
\t \t \t fillOpacity: 0.8, 
 
\t \t }; 
 
\t \t //set two points in driving direction of vehicle 
 
\t \t 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) 
 
\t \t var poly = new google.maps.Polyline({ 
 
      path: dirCoordinates, 
 
      strokeColor: 'green', 
 
      strokeOpacity: 0, 
 
      strokeWeight: 6, 
 
\t \t map: map 
 
\t \t }); 
 
     poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]}); 
 
\t \t //set the text as marker label without displayinge the marker 
 
\t \t var m = new google.maps.Marker({ 
 
\t \t position: new google.maps.LatLng(dirCoordinates[0]), 
 
\t \t label: { 
 
\t \t \t color: 'black', 
 
\t \t \t fontWeight: 'bold', 
 
\t \t \t text: 'TN28 AF 1416', 
 
\t \t \t }, 
 
\t \t icon: { 
 
\t \t \t url: 'none_marker.png', 
 
\t \t \t anchor: new google.maps.Point(10, -25), 
 
\t \t }, 
 
\t \t \t map: map 
 
\t \t }); 
 

 
\t \t //..... 
 
\t \t // ..more vehicles 
 
\t } 
 
    </script> 
 
\t <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
    </body> 
 
</html>

来源

2017-11-04 21:06:53 ReFran

谢谢，但我需要输出形式的打字稿.. –

我有，你可以在使用的情况下，你没有找到一个更好的解决方案解决方法：

你为什么不创建一个新的标记图像，透明背景和底部边距？你可以使用你在问题中发布的相同代码。

夸张的例子 https://imgur.com/NLyxyTB.png

来源

2017-11-09 00:01:39 Falci

这不是AGM的问题，这是谷歌地图的API，它不允许你使用HTML标志物，所以只图像的问题。 :(有一些解决方法可以创建像that这样的自定义HTML标记，但不幸的是，自定义图层不受AGM支持，但(ticket)。看起来如果您真的需要这个，您必须自己实现自定义标记，而无需使用自定义Google覆盖图AGM。

来源

2017-12-18 07:46:40

如何将html添加到角2中的agm-marker？

回答

相关问题