0
我正在構建一個Ionic 2應用程序,其中我有一個谷歌地圖。我想在該地圖中繪製多邊形,然後計算它的面積並保存這些緯度,朗(正如該解決方案中所述:calculate area of a drawn polygon on google map javascript)。用Google地圖在Ionic2中繪製多邊形
由於我是新來的打字稿和Angular2以及,我尋求幫助,讓它工作。
到目前爲止,我component.ts看起來像這樣:
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/start/start.html'
})
export class StartPage {
public selectedShape: any
constructor(private navController: NavController, private platform: Platform) {
// google.maps.event.addDomListener(window, 'load', this.initializeMap);
this.initializeMap();
}
clearSelection() {
if (this.selectedShape) {
this.selectedShape.setEditable(false);
this.selectedShape = null;
}
}
setSelection(shape) {
console.log("Set selection")
this.clearSelection();
this.selectedShape = shape;
shape.setEditable(true);
google.maps.event.addListener(shape.getPath(), 'set_at', this.calcar);
google.maps.event.addListener(shape.getPath(), 'insert_at', this.calcar);
}
calcar() {
var area = google.maps.geometry.spherical.computeArea(this.selectedShape.getPath());
document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);
}
deleteSelectedShape() {
if (this.selectedShape) {
this.selectedShape.setMap(null);
}
}
initializeMap() {
this.platform.ready().then(() => {
var minZoomLevel = 15;
var 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
};
let drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
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.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
this.setSelection(newShape);
});
var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);
console.log(area)
this.setSelection(newShape);
}
});
google.maps.event.addListener(drawingManager, 'drawingmode_changed', this.clearSelection);
google.maps.event.addListener(map, 'click', this.clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', this.deleteSelectedShape);
console.log(drawingManager)
});
}
}
我的HTML:
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Start</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<!-- <div padding>
<img src="images/icon_transperent.png" width="200"/>
</div> -->
<div id="map_canvas"></div>
<div>
<button id="delete-button">Delete Shape</button>
<button id="calculate" (click)="calcar()">Area</button>
<div id="area"></div>
</div>
</ion-content>
到目前爲止,我的屏幕看起來如下,沒有圖紙經理選擇和按鈕基本上什麼都不做:
UPDATE
使用,而不是可能帶來的屏幕但是,沒有功能上描繪管理部(即刪除形狀,overlayComplete等)工作,也很少有錯誤的作業,現在糾正時的聲明現在給我區域oberlaycomplete。然而clearSelection,爲setSelection,deleteSelection不工作,我得到Uncaught TypeError: this.setSelection is not a function
錯誤