代码之家 › 专栏 › 技术社区 › Bishan

Agm方向的多个方向和多种颜色

agm-direction angular-google-maps google-maps angular

0

Bishan · 技术社区 · 7 年前

Agm-Direction Angular Google Maps 在两点之间绘制行驶路线。

<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>

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

1 回复 | 直到 7 年前

1

3

Bishan 7 年前

找到了答案。

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>

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