我需要一种方法来使用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,代替标记上的那个图标.
解决方法
我不知道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>