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

在数据绑定到地图后，我尝试更改标记样式。但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必须通过您从服务获得的数据来自杀。

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

Answer 3

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.

Answer 4

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

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

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

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

或正方形

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

5 个答案: