Я создаю приложение Ionic2, в котором у меня есть карта google. мне нужно:Google maps в приложении Ionic2
- Нарисуйте многоугольник
- вычислить его площадь
- должны быть в состоянии удалить полигон
я в принципе нужно точно такое же решение, как здесь: calculate area of a drawn polygon on google map javascript
До сих пор я преобразовал весь код в машинописный текст, и он почти работает. Однако есть один вопрос:
- Когда я закончил рисовать многоугольник в первый раз, область отображается в пользовательском интерфейсе. Если в этот момент я изменяю свою форму, область не обновляется. см. изображение gif.
- Если я нажимаю в любом месте карты, а затем снова на нарисованной фигуре и изменяю ее, она вычисляется для каждой последующей модификации.
Что я делаю неправильно?
Мой код компонента:
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/start/start.html'
})
export class StartPage {
selectedShape: any;
constructor(private navController : NavController, private platform : Platform) {
this.initializeMap();
}
clearSelection = (shape): void => {
if(shape) {
shape.setEditable(false);
shape = null;
this.selectedShape=shape
}
}
setSelection = (shape): void => {
this.clearSelection(shape);
var shape = shape;
this.selectedShape=shape;
console.log(shape.getPath())
shape.setEditable(true);
google.maps.event.addListener(shape.getPath(), 'set_at',()=>{this.calcar(shape)});
google.maps.event.addListener(shape.getPath(), 'insert_at',()=>{this.calcar(shape)});
}
calcar= (shape): void => {
var shape = shape
var area = google.maps.geometry.spherical.computeArea(shape.getPath());
document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);
this.selectedShape=shape
}
deleteSelectedShape =(): void => {
if (this.selectedShape) {
this.selectedShape.setMap(null);
}
}
initializeMap =(): void => {
var newShape
var map
var drawingManager
this.platform.ready().then(() => {
var minZoomLevel = 15;
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(52.5200, 13.4050),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
]
},
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
this.selectedShape=e.overlay
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click',()=> {
this.setSelection(newShape);
});
var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);
() => {this.setSelection(newShape);}
}
});
google.maps.event.addListener(map, 'click', ()=>{this.clearSelection(newShape);});
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', ()=>{this.deleteSelectedShape();});
});
}
}
Отлично! Это сработало! Благодарю. У меня есть для вас один вопрос, но ваш код выглядит немного иначе, чем мой, например, как вы объявляете переменные, где вы объявляете их и т. Д. Я новичок в машинописном тексте и хочу знать, правильно пишу ли я? Однако он работает. Кроме того, что мы подразумеваем под этим. SetSelection (newShape); – Nitish