Question

我目前正在使用 https://github.com/SebastianM/angular2-google-maps Angular Google Maps链接，我的要求是当用户点击它放置的按钮时使用 agm-polyline 绘制动态线条地图上有纬度和经度的点，现在我想使用相同的线条绘制路径：我的样本是

app.html

        <button (click)="add()">Add Line</button>
<agm-map [latitude]="lat" [longitude]="lng" [panControl]="true" [usePanning]="true" [rotateControl]="true">
        <agm-marker [latitude]="lat" [longitude]="lng">
        </agm-marker>
      </agm-marker>
              <agm-polyline *ngFor="let data of lines" [editable]="true">
                            <agm-polyline-point
                              [latitude]="data.lat"
                              [longitude]="data.lng">
                            </agm-polyline-point>
              </agm-polyline>
    </agm-map>

app.component.ts

 add() {
console.log('on shape')
this.lines.push({lat: 51.79, lng: 7.8});//creates a point now want to add draw path

}

现在使用此点创建一个点我想绘制一条线，任何帮助将不胜感激

Answer 1

你需要放置你的* ngFor =＆＃34;让行的数据＆＃34;在agm-polyline-point里面。像这样： -

<agm-polyline [editable]="true">
    <agm-polyline-point *ngFor="let data of lines" 
        [latitude]="data.lat"
        [longitude]="data.lng">
    </agm-polyline-point>
</agm-polyline>

使用angular2谷歌地图添加动态线条

1 个答案: