Ajouter une ligne dynamique à l'aide angular2 google maps

Question

J'utilise actuellement https://github.com/SebastianM/angular2-google-maps angulaire Google Maps lien ci-joint, mon exigence est de tracer une ligne dynamique à l'aide agm-polyligne lorsque l'utilisateur clique sur le bouton, il met un point sur la carte avec la latitude et longitude, maintenant je veux dessiner un chemin en utilisant la même linee: mon échantillon est

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 

}

il crée un point à l'aide maintenant ce point que je veux tracer une ligne d'aide sera grandement appréciée

Answer 1

Vous devez placer votre * ngFor = "laisse les données des lignes" à l'intérieur du point agm-polyline. Comme ceci: -

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