1

I am using angular google map(AGM) npm package. following is code

<agm-map
      (mapClick)="polyineMapClicked($event)"
        [ngStyle]="{ height: '400px' }"
        [zoom]="zoom"
        [latitude]="lat"
        [longitude]="lng"
      >
        <agm-polyline strokeColor="#247ba0" *ngIf="showLine" (polyPathChange)="updatePath($event)" (lineRightClick)="onLineRightClick($event)" [editable]="true">
          <agm-polyline-point
            *ngFor="let point of polylinePoints"
            [latitude]="point.lat"
            [longitude]="point.lng"
          ></agm-polyline-point>
        </agm-polyline>
      </agm-map>

above is HTML code. here I want to add multiple polyline. when I click on map, polyline is added and I get latitude and longitude which I have saved in polylinePoints. but after adding one polyline, I want to add second polyline, while adding second polyline it continues with 1st polyline. How to break 1st polyline and add 2nd polyline.

What I have tired : I have use lineRightClick. on right click of mouse, I have save data in masterPolyLines array and make empty polylinePoints array. polylinePoints array is used to display polyline. by this I get 1st polyine, but when I click on map 2nd polyline is continue with 1st polyline. following are function in ts file

onLineRightClick(ev){
console.log('event on right click',ev);
//this._polylineManager.addPolyline(ev);
console.log('this.polylinePoints',this.polylinePoints);
  this.masterPolyLines.push({
    id : 1,
    routes : this.polylinePoints
  });
  this.polylinePoints = [];
  console.log('masterPolyLines',this.masterPolyLines);
}
polyineMapClicked($event){
  console.log('event',$event);
  this.polylinePoints.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng
    });
  this.showLine = true;
  setTimeout(() => {
    this.divClick.nativeElement.click();
  }, 200);
  //setTimeout(() => this.showLine = true);
  console.log('polylinePoints',this.polylinePoints);
}

I want to break 1st polyline and add 2nd polyline and more.

sangRam
  • 315
  • 4
  • 17

0 Answers0