使用谷歌地图将点放置在折线的开头和结尾处

Question

我尝试在angular4中使用AgmCoreModule在谷歌地图中应用折线。我成功应用了折线，但是如何在折线的起点和终点添加点？

代码html：

<div class="container">
      <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
         <ng-container>
           <agm-polyline  [strokeColor]="color" [strokeWeight]="weight">
              <agm-polyline-point *ngFor="let test of lines" [latitude]="test.latitude" 
              [longitude]="test.longitude" >
              </agm-polyline-point>
          </agm-polyline>
        </ng-container>
      </agm-map>
    </div>

和typscript代码只是数组行和颜色

Answer 1

我不知道是否有特定的结构来解决您的问题，但AgmCircle是一个很好的解决方案吗？

<div class="container">
    <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <ng-container>
            <agm-circle [latitude]="lines[0].latitude" [longitude]="lines[0].longitude" 
                [fillOpacity]="0.5" [radius]="1000" ></agm-circle>
            <agm-circle [latitude]="lines[lines.length - 1].latitude" [longitude]="lines[lines.length - 1].longitude" 
                [fillOpacity]="0.5" [radius]="1000" ></agm-circle>
            <agm-polyline [strokeColor]="color" [strokeWeight]="weight">
                <agm-polyline-point *ngFor="let test of lines" [latitude]="test.latitude" [longitude]="test.longitude" ></agm-polyline-point>
            </agm-polyline>
        </ng-container>
    </agm-map>
</div>