Ionic2 应用程序中的谷歌地图

Question

我正在构建一个 Ionic2 应用程序，其中有一个谷歌地图。 我需要：

1. 画一个多边形
2. 计算它的面积
3. 应该可以删除多边形

我基本上需要与这里完全相同的解决方案：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();});

    });

  }

}

Answer 1

你的错误在这里：

  var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
  document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

  () => {this.setSelection(newShape);} <== this line
}

你没有调用setSelection 函数。同理：

function () {
  this.setSelection(newShape);
};

您需要使用以下内容：

this.setSelection(newShape);

另见working plunker