如何在 Angular Google Maps 中绘制填充弧？答案

【问题标题】：How to draw a filled arc in Angular Google Maps?如何在 Angular Google Maps 中绘制填充弧？
【发布时间】：2019-05-17 19:39:05
【问题描述】：

我有一个要求，我想画一个有四个象限的圆，所有四个象限都具有从中心点指定的角度和半径。如下：

但不是圆周上的标记。我应该能够提供弧度、半径和中心点。如何使用 Angular 谷歌地图实现？

我可以使用agm-circle 指令获取中心点并设置半径并画一个圆。

我参考了这个答案：https://stackoverflow.com/a/24959636/11253641

【问题讨论】：

不确定AGM是否有arc指令，但可以根据stackoverflow.com/questions/24956616/…提出的解决方案来实现。
就像给出的例子一样，它使用多边形而不是圆形，同样，也许我们可以使用 AGM 多边形指令绘制圆弧？

标签： angular google-maps angular-google-maps

【解决方案1】：

你可以使用多边形指令

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
  <agm-polyline>
      <agm-polyline-point *ngFor="let point of arcPoints" [latitude]="point.latitude" [longitude]="point.longitude">
      </agm-polyline-point>
  </agm-polyline>
</agm-map>

在component.ts中

  ngOnInit() {
    this.arcPoints = drawArc(center, initialBearing, finalBearing, radius);
  }

【讨论】：

我正在使用 Angular Google Maps，它没有诸如 center.lat()、center.DestinationPoint() 等 Google Maps 功能，对我不起作用。