Ionic-地图绘图工具-侦听器中的访问变量

Question

我正在使用Google Maps API和绘图工具库。

我能够在地图上绘制多边形。现在，我需要将坐标存储到字符串中。

如何在侦听器的源代码中访问全局变量？

我都不能存储在本地存储中，因为出现以下错误：

this.storage.set('pruebaArray', JSON.stringify(this.armaJSON));

无法读取未定义的属性“集合”

在save()方法中，我得到：

console.log(armaJSON);

未定义

希望你能帮助我。

谢谢。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

declare var google;
var armaJSON;

@IonicPage()
@Component({
  selector: 'page-area',
  templateUrl: 'area.html',
})
export class AreaPage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  selectedShape: any;
  public jsonsave:string;

  constructor(public navCtrl: NavController,
    private platform: Platform,
    private storage: Storage,
    public navParams: NavParams) {

    platform.ready().then(() => {
      this.addMap(-34.8440489, -60.30644789);  //My place
      this.initDraw();
    });
  }


  addMap = (lat, long): void => {
    let latLng = new google.maps.LatLng(lat, long);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      disableDefaultUI: true,
      zoomControl: true
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

  initDraw = (): void => {

    var polyOptions = {
      strokeWeight: 0,
      fillOpacity: 0.45,
      fillColor: '#ffff00',
      editable: true
    };

    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['marker', 'polygon']
      },
      markerOptions: { icon: 'assets/imgs/beachflag.png' },
      polygonOptions: polyOptions,
      circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
      //POLYGON
      if (e.type != google.maps.drawing.OverlayType.MARKER) {
        drawingManager.setDrawingMode(false);
        var newShape = e.overlay;
        newShape.type = e.type;
        this.armaJSON='[';
        for (var i = 0; i < newShape.getPath().getLength(); i++) {
          if (i > 0) {
            this.armaJSON+=','
          }
         this.armaJSON+='{"lat": ' + + newShape.getPath().getAt(i).lat() + ', "lng": ' + newShape.getPath().getAt(i).lng() + '}';
        }
        this.armaJSON+=']';
        this.jsonsave=this.armaJSON;
        console.log(this.armaJSON);
        //Se almacena el array
        this.storage.set('pruebaArray', JSON.stringify(this.armaJSON));
      }

      //MARKER
      if (e.type == google.maps.drawing.OverlayType.MARKER) {
        var newShape = e.overlay;
        newShape.type = e.type;
        console.log('Lat:' + newShape.getPosition().lat() + ' - Long:' + newShape.getPosition().lng());
      }
    });

    drawingManager.setMap(this.map);
  }

  save() {
    console.log(armaJSON);
    //Se almacena el array
    //this.storage.set('pruebaArray', armaJSON);
  }



} //end class

page-area {
    #map {
        height: 100%;
      }
}

<ion-navbar *navbar>
  <button menuToggle>
      <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Start</ion-title>
</ion-navbar>


<ion-content>
  <div #map id="map"></div>
</ion-content>

<ion-footer style="padding:4px">
  <button ion-button (click)="save()" style="width: 31%; margin-left:2px">Save</button>
</ion-footer>