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