我正在尝试在编辑和拖动多边形时获取更新的多边形路径。我尝试像下面的代码那样做。
在我的打字稿中:
@ViewChild(AgmPolygon) polygon: any;
this.polygon.getPaths().then((x: any[]) => {
x.forEach(y => {
console.log('-');
y.forEach(z => console.log(z.lat(), z.lng()));
});
});
在我的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 for polygon.and我的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
}]}
答案 0 :(得分:2)
我必须在阅读ATM agm多边形编辑更改事件后才能克服这个问题,它仍然在PR上。
所以,我回到基础并寻找谷歌地图api类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())