0
我正在构建一个Ionic2应用程序,其中有一个Google地图。 我需要:Ionic2应用程序中的Google地图
- 绘制多边形
- 计算它的面积
- 应该能够删除多边形
基本上,我需要完全按照这里的同一个解决方案:calculate area of a drawn polygon on google map javascript
到目前为止,我转换了打字稿中的整个代码,它几乎可以工作。但有一个问题:
- 当我完成第一次绘制多边形时,区域显示在UI上。如果在这一点上,我修改我的形状区域不更新。看到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();});
});
}
}
太好了!有效!谢谢。尽管我有一个问题,你的代码看起来和我的代码看起来有些不同,就像你声明变量的方式,声明它们的地方等等。我是打字机新手,想知道,我是用正确的方式写的吗?然而,它正在发挥作用。此外,我们的意思是this.setSelection(newShape); – Nitish