我正在構建一個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錯誤

來源

2016-07-05 Nitish

以下是打字稿幾乎工作液：

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();}); 

    }); 

    } 

}

來源

2016-07-06 16:05:56 Nitish

用Google地圖在Ionic2中繪製多邊形

UPDATE

回答

相關問題