0

我正在使用角度谷歌地图（AGM）npm 包。以下是代码

<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>

上面是 HTML 代码。在这里我想添加多条折线。当我单击地图时，会添加折线并获得保存在折线点中的纬度和经度。但是在添加一条折线之后，我想添加第二条折线，同时添加第二条折线它继续使用第一条折线。如何打破第一条折线并添加第二条折线。

我厌倦了：我使用lineRightClick。在鼠标右键单击时，我将数据保存在 masterPolyLines 数组中并制作空的 polylinePoints 数组。polylinePoints 数组用于显示折线。这样我得到了第一个折线，但是当我点击地图时，第二个折线继续使用第一条折线。以下是ts文件中的函数

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);
}

我想打破第一条折线并添加第二条折线等等。

4

0 回答 0