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