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

发布时间：2020-12-14 18:38:04 所属栏目：资源来源：网络整理

导读：我需要一种方法来使用agm map自定义Angular 2中的地图标记.在车辆跟踪应用中,我必须通过实时跟踪组件中的agm-marker显示当前的车辆状态.我需要以三种不同的颜色显示标记(比如绿色表示停止运行红色,黄色表示空闲运行),我还需要显示目前车辆行驶的方向. 我搜索

我需要一种方法来使用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标签).

解决方法

我不知道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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!