编辑和拖动agm多边形时如何获取路径？答案

【问题标题】：How to get paths of agm polygon when it is edited and dragged?编辑和拖动agm多边形时如何获取路径？
【发布时间】：2017-11-06 06:40:40
【问题描述】：

我试图在编辑和拖动多边形时获取更新的多边形路径。我试着像下面的代码那样做。

在我的打字稿中：

 @ViewChild(AgmPolygon) polygon: any;
 this.polygon.getPaths().then((x: any[]) => {
   x.forEach(y => {
     console.log('-');
     y.forEach(z => console.log(z.lat(), z.lng()));
   });
 });

我还关注了以下链接1st link 2nd link。

在我的 html 中：

<agm-map [latitude]="lat" [fullscreenControl]="true" 
    (mapClick)="mapClicked($event)" [longitude]="lng" [zoom]="8" [mapTypeControl]="true">

  <agm-polygon [fillColor]="item.fillColor" (polyMouseOut)="polyMouseOut($event)" 
    (polyMouseMove)="polyMouseMove($event)" [fillOpacity]="item.fillOpacity" 
    *ngFor="let item of zonesPath; let i=index" [editable]="item.ZoneID==ZoneID" 
    (polyMouseUp)="polyMouseUp(item,$event)" (polyMouseDown)="polyMouseDown($event)" 
    (polyDblClick)="polyDblClick($event)" (polyDragStart)="polyDragStart($event)" 
    (polyDragEnd)="polyDragEnd($event,item)" (polyDrag)="polyDrag($event)" 
    [polyDraggable]="false" [paths]="item.ZonePaths" (polyClick)="polyclick($event)">
  </agm-polygon>

  <agm-polygon [paths]="paths"></agm-polygon>
</agm-map>

我正在为多边形做 *ngFor。我的 json 数据是：

{
"ZoneID": "594dff0ee10452d8567b23c6",
"strokeColor" : "#038063",
"strokeOpacity" : 0.2,
"strokeWeight" : 2,
"fillColor" : "#038063",
"fillOpacity" : 0.35,
"draggable" : false,
"editable" : false,
"visible" : true,
"ZonePaths": [ 
    {
        "lat" : 17.535107299215,
        "lng" : 78.2346725463869
    }, 
    {
        "lat" : 17.541981926489,
        "lng" : 78.240509033203
    }, 
    {
        "lat" : 17.54460076354,
        "lng" : 78.249778747559
    }, 
    {
        "lat" : 17.55082034986,
        "lng" : 78.284454345703
    }]}

【问题讨论】：

我收到类似this.polygon.getPaths is not a function的错误
您也可以提供您的数据吗？我的意思是，在模板中您引用了一些字段，例如 items 等，我尝试在本地复制它，只是想确保按原样进行
我建议你创建一个 plunkr 或 stackblitz。
我正在处理类似的需求。如果您可以发布上述代码的 github 链接，那就太好了。我正在尝试从数据库加载多个多边形。

标签： angular google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

在阅读 ATM agm 多边形编辑更改事件后，我必须克服这个问题，它仍然在 PR 上。

所以，我回归基础，寻找 google map api class v3。

@ViewChild(AgmMap) map: any;
polygon: any;
this.map._mapsWrapper.createPolygon({
      paths: this.area,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.3,
      editable: true,
    }).then((polygon: any) => {
      this.polygon = polygon
    });

在此之后，您可以添加事件或使用 getPath() 获取路径更改

console.debug(this.polygon.getPath())

【讨论】：

【解决方案2】：

首先获取地图：

HTML 文件：

<agm-map (mapReady)="onMapReady($event)">

TS 文件：

@ViewChild(AgmMap) map: any
map: any;

onMapReady(map){
  this.map = map;
}

然后创建多边形对象并将其添加到地图中：

TS 文件：

    // Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
  { lat: 25.774, lng: -80.190 },
  { lat: 18.466, lng: -66.118 },
  { lat: 32.321, lng: -64.757 },
  { lat: 25.774, lng: -80.190 }
];


// Construct the polygon.
this.polygon = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  editable: true,
  draggable: true,
});

//Set polygon to map
this.polygon.setMap(this.map);

读取路径：

this.getPolygonCoordinates(this.polygon);

...

getPolygonCoordinates(draggablePolygon) {
  const len = draggablePolygon.getPath().getLength();
  const polyArrayLatLng = [];

  for (let i = 0; i < len; i++) {
    const vertex = draggablePolygon.getPath().getAt(i);
    const vertexLatLng = { lat: vertex.lat(), lng: vertex.lng() };
    polyArrayLatLng.push(vertexLatLng);
  }

  console.log(polyArrayLatLng);
}

【讨论】：