1

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

  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,
        }
        }
    }
  ]

下面是角度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>

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

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

4

1 回答 1

0

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

添加新航点时，添加 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>
于 2020-11-26T09:57:33.560 回答