仅尝试更改 agm 方向航点标记的图标答案

【问题标题】：Trying to change agm direction waypoints marker's icon ONLY仅尝试更改 agm 方向航点标记的图标
【发布时间】：2020-10-26 08:05:15
【问题描述】：

我正在开发一个项目，我正在使用来自 angular google map api 的<agm-direction>。实际上，我想显示一个方向，该方向具有起点、终点以及在这些航点/步距之间。请在下面找到我的对象：

  public directions: Array<any> = [
    {
      task_label:'DHL0001',
      origin: 'Beau-bassin Rose-Hill Mauritius',
      destination: 'Flic en flac, police station Mauritius',
      waypoints:[
        {
          location: 'Quatre Bornes, Police station'
        }
      ],
      visible: true,
      render_options: 
        {
          suppressMarkers: true,
          draggable: true,
          polylineOptions: { 
            strokeColor: '#cc33ff', 
            strokeOpacity :1,
            strokeWeight: 5,
            zIndex: 1,
            geodesic: false,
            clickable: true,
            editable: false,
           } 
        },
      marker_options:
        {
          origin: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756617_face_512x512.png',
            draggable: true,
            infoWindow: `<h4>Test</h4>`,
            label: {
              text: 'Something',
              fontWeight: 'bold',
            }
          },
          destination: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756626_face_512x512.png',
            label: 'MARKER LABEL',
            opacity: 0.8,
        }
        }
    }
  ]

下面是 angular html 代码：

        <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng">
            <agm-direction *ngFor="let direction of directions; let i = index"
            [origin]="direction.origin"
            [destination]="direction.destination"
            [renderOptions]="direction.render_options"
            [markerOptions]="direction.marker_options"
            [waypoints]="direction.waypoints"
            [visible]="direction.visible"
            (onChange)="change($event,i)"
            ></agm-direction>
          </agm-map>

一切都很好，只是航点标记有目的地标记的图标，而目的地标记没有有任何图标。求结果

我想为起点、目的地和航点设置三个不同的图标，更进一步我想保存新的可拖动航点。有人可以帮帮我吗？

【问题讨论】：

标签： angular waypoint agm-direction

【解决方案1】：

遇到了同样的问题，终于解决了。如果其他人遇到同样的问题，请在此处留言：

添加新航点时，添加stopover: false。

markerOptions = {
      origin: {
        icon: 'path-to-icon'
      },
      destination: {
        icon: 'path-to-icon'
      },
      waypoints: {
        icon: 'path-to-icon'
      }
    }

renderOptions = {
    suppressMarkers: true
  };

let latlng = new google.maps.LatLng(a.latitude, a.longitude);
      this.waypoints.push({
        location: latlng,
        stopover: false
      });


<agm-direction [origin]="origin"
                           [destination]="destination"
                           [waypoints]="waypoints"
                           [markerOptions]="markerOptions"
                           [renderOptions]="renderOptions"
                           [optimizeWaypoints]="false"></agm-direction>

【讨论】：