2017-09-26 15 views
1

をマップする使用して動的な行を追加し、私の要件はAGM-ポリラインを使用して動的な線を描画することであるユーザーがボタンをクリックしたときには、緯度と地図上にポイントを置き、経度は、今私は同じlineeを使用してパスを描きたい: 私のサンプルがあるがangular2 Googleは、私が現在接続<strong><a href="https://github.com/SebastianM/angular2-google-maps" rel="nofollow noreferrer">https://github.com/SebastianM/angular2-google-maps</a></strong>角度Googleマップのリンクを使用しています

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 

}

それが今、私は任意のヘルプは大幅にあなたの*を配置する必要があり

答えて

0

を理解されるであろうラインを描きたい、このポイントを使用してポイントを作成しますngFor = 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> 
関連する問題

 関連する問題