如何将 html 添加到角度 2 中的 agm 标记？答案

【问题标题】：How to add html to a agm-marker in angular 2?如何将 html 添加到角度 2 中的 agm 标记？
【发布时间】：2018-04-02 06:53:34
【问题描述】：

我需要一种在 Angular 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 标签）。

【问题讨论】：

看看this library。
你试过前面提到的库吗？如果您仍然遇到问题，请发布重现您的问题的示例代码。

标签： angular google-maps typescript google-maps-api-3 google-maps-markers

【解决方案1】：

一旦我尝试更改标记样式，在数据绑定到地图后。但是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”
向西行驶的车辆图标名称“270-green-icon.svg”
向西北行驶的车辆图标名称“315-green-icon.svg”
车辆停下并驶向西南图标名称“225-red-icon.svg”

像这样，您必须为每个车辆状态和方向提供一个图标列表。 Marker Url 必须根据您从服务中获得的数据来决定。

【讨论】：

【解决方案2】：

我不知道 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'
        });

		///// 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>

【讨论】：

【解决方案3】：

我有一个解决方法，如果您找不到更好的解决方案，您可以使用它：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

你可以随时添加

例如

<agm-marker [iconUrl]="icon.url" [latitude]="icon.latitude" [longitude]="icon.longitude"></agm-marker>

如果你想要其他东西，比如圆圈

https://angular-maps.com/api-docs/agm-core/directives/agmcircle#info

或

<agm-circle *ngFor="data in circles"
              [latitude]="data.lat"
              [longitude]="data.lng"
              [circleDraggable]="true"
              [editable]="true"
              [fillColor]="'data.color'"
              [radius]="data.radius"
  >
  </agm-circle>

或正方形

【讨论】：