import { Component , NgZone } from '@angular/core' ; import { IonicPage } from 'ionic-angular' ; import { GoogleMaps , GoogleMap , Marker , ILatLng , Polyline , Spherical , BaseArrayClass } from '@ionic-native/google-maps' ; /**
 * Generated class for the BaseArrayClassPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */ @ IonicPage ( ) @ Component ( { selector : 'page-base-array-class' , templateUrl : 'base-array-class.html' } ) export class BaseArrayClassPage { map : GoogleMap ; distance : string ; constructor ( private _ngZone ) { } ionViewDidLoad ( ) { console . log ( 'ionViewDidLoad PolygonPage' ) ; this . loadMap ( ) ; } loadMap ( ) { let points = [ { lat : 33.91636924837674 , lng : - 118.39605331420898 } , { lat : 33.90205144970967 , lng : - 118.39639663696288 } , { lat : 33.90190897196702 , lng : - 118.37905883789062 } , { lat : 33.89471353635718 , lng : - 118.3787155151367 } ] ; this . map = GoogleMaps . create ( 'map_canvas' , { camera : { target : points } } ) ; let polyline = this . map . addPolylineSync ( { points : points } ) ; let baseArray = polyline . getPoints ( ) ; baseArray . mapAsync ( ( point , next ) => { this . map . addMarker ( { position : point , draggable : true } ) . then ( next ) ; } ) . then ( ( markers ) => { let baseArray2 = new BaseArrayClass < Marker > ( markers ) ; baseArray2 . forEach ( ( marker , idx ) => { marker . on ( 'position_changed' ) . subscribe ( ( params ) => { baseArray . setAt ( idx , params [ 1 ] ) ; } ) ; } ) ; markers [ 0 ] . trigger ( 'position_changed' , null , markers [ 0 ] . getPosition ( ) ) ; } ) ; baseArray . on ( 'set_at' ) . subscribe ( ( ) => { this . _ngZone . run ( ( ) => { let distanceMeter = Spherical . computeLength ( baseArray ) ; this . distance = ( distanceMeter * 0.000621371192 ) . toFixed ( 2 ) + " miles" ; } ) ; } ) ; } }