angular - Agm-Direction 中具有多种颜色的多个方向

Question

我正在使用带有Angular Google Maps的Agm-Direction来绘制两点之间的行驶路径。

<agm-map [latitude]="6.9271" [longitude]="79.8612">

 <agm-direction [origin]="{ lat: 6.8403134, lng: 80.0021128 }" [destination]="{ lat: 6.71532762, lng: 80.06215197 }">
 </agm-direction>

  <agm-direction [origin]="{ lat: 6.4319639, lng: 79.9983415 }" [destination]="{ lat: 6.73906232, lng: 80.15640132 }">
  </agm-direction>

  <agm-direction [origin]="{ lat: 6.71532762, lng: 80.06215197 }" [destination]="{ lat: 6.4319639, lng: 79.9983415 }">
  </agm-direction>

</agm-map>

我需要以多种颜色绘制多条驾驶路径。当前以蓝色绘制所有方向。

如何用不同的颜色绘制多个方向？

Answer 1

找到了答案。

我们可以设置polylineOptions不同颜色的绘制方向。

HTML

<agm-map [latitude]="6.9271" [longitude]="79.8612">
  <agm-direction *ngFor="let dir of dirs" [origin]="dir.origin" [destination]="dir.destination" [renderOptions]="dir.renderOptions">
  </agm-direction>
</agm-map>

TS

public dirs: Array<any> = [{
  origin: { lat: 6.8403134, lng: 80.0021128 },
  destination: { lat: 6.71532762, lng: 80.06215197 },
  renderOptions: { polylineOptions: { strokeColor: '#f00' } },
}, {
  origin: { lat: 6.4319639, lng: 79.9983415 },
  destination: { lat: 6.73906232, lng: 80.15640132 },
  renderOptions: { polylineOptions: { strokeColor: '#0f0' } },
}];

https://github.com/explooosion/Agm-Direction/issues/46上提供了更多详细信息