Я установил приложение Ionic 4, используя Angular 8 с компонентом карт Google. В компоненте мне нужно будет нарисовать несколько полигонов, иметь возможность редактировать их и в конечном итоге сохранить их вершины в базе данных.
Если бы я мог жестко кодировать некоторое количество полигонов, это довольно тривиальная задача с помощью метода polygon.getPath () или polygon.getPaths ().
Однако я использую компонент google.maps.drawing.DrawingManager, и я видел, как люди извлекают очки только через слушатели событий, как в вопросе 15454919 . Я реализовал нечто подобное здесь:
google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
console.log(polygon.getPath());
});
В посте рекомендуется улучшение путем вложения слушателя mouseup в эту функцию, которая может работать или не работать, но я думаю, что должен быть лучший способрешить эту проблему.
Существует ли какой-то тип функциональности "для каждого" цикла, который может извлекать данные из каждого многоугольника, созданного с помощью инструмента DrawingManager? Идея состоит в том, чтобы нажать кнопку «Отправить» и сразу захватить каждый экземпляр многоугольника на странице.
HTML
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Map
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div #map id="map"></div>
<ion-button (click)="submit()"> Submit</ion-button>
</ion-content>
Машинопись
export class HomePage {
@ViewChild('map', { static: false }) mapElement: ElementRef;
map: any;
constructor() {}
ionViewDidEnter() {
let latLng = new google.maps.LatLng(someLat, someLng);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
fullscreenControl: false
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
polygonOptions: {
fillColor: '#ff0000',
draggable: true,
editable: true
}
});
drawingManager.setMap(this.map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
console.log(polygon.getPath());
});
}
submit() {
//Compile all polygons then
//Post to database here
}
}
Опять же, я мог бы использовать метод слушателя, просто добавив массив, но я быдобавить обработку для полигонов, отредактированных после того, как они были созданы, и кажется, что это будет довольно плохая практика программирования.