2017-12-19 26 views
0

'マーカー上のドラッグ終了'リスナーによって指定された新しい座標を設定する際に奇妙な問題に直面しています。私の変数this.latとthis.lngを設定しようとしたり、イベントリスナーでそれらをログアウトコンソールしようとしている場合でも、私は次のエラーを取得するとき:Googleマップのネイティブは、ドラッグ後にマーカ位置を取得します

ERROR 
Error {rejection: TypeError, promise: t, zone: r, task: e, stack: (...)…} 
message: "Uncaught (in promise): TypeError: Cannot set property 'lat' of undefined↵TypeError: Cannot set property 'lat' of undefined↵ at file:///android_asset/www/build/28.js:180:27↵ at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)↵ at Object.zone._inner.zone._inner.fork.onInvoke (file:///android_asset/www/build/vendor.js:4248:33)↵ at t.invoke (file:///android_asset/www/build/polyfills.js:3:14916)↵ at r.run (file:///android_asset/www/build/polyfills.js:3:10143)↵ at file:///android_asset/www/build/polyfills.js:3:20242↵ at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)↵ at Object.zone._inner.zone._inner.fork.onInvokeTask (file:///android_asset/www/build/vendor.js:4239:33)↵ at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15581)↵ at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)" 
promise: t 
rejection: TypeError 
stack: (...) 
get stack: function() { [native code] } 
set stack: function() { [native code] } 
task: e 
zone: r 
__proto__: d 

そのような2つの変数が到達可能か私でない場合知りません。今は3時間デバッグしようとしましたが、運が一切ありません。たぶん私は何かに気づいていないだけなので、どんな助けも大いに簡単になるでしょう。問題の関数は、他のすべてが動作しているupdatePositionです。ここで

は私のコードです:

import { Component } from '@angular/core'; 
import {IonicPage, NavController, NavParams, Platform} from 'ionic-angular'; 
import {HelperProvider} from "../../providers/helper/helper"; 
import { 
    GoogleMaps, 
    GoogleMap, 
    GoogleMapsEvent, 
    GoogleMapOptions, 
    Marker, CameraPosition, ILatLng 
} from '@ionic-native/google-maps'; 
import {Geolocation, GeolocationOptions} from "@ionic-native/geolocation"; 

@IonicPage() 
@Component({ 
    selector: 'page-statement', 
    templateUrl: 'statement.html', 
}) 
export class StatementPage { 

    map: GoogleMap; 
    lat:any; 
    lng:any; 
    settlementLat:any; 
    settlementLng:any; 
    geoLocationOption: GeolocationOptions; 
    showMap: boolean = false; 

    constructor(
    public navCtrl: NavController, 
    public platform: Platform, 
    private geoLocation: Geolocation, 
    private helper: HelperProvider, 
    public navParams: NavParams) { 

    const data = JSON.parse(localStorage.getItem('deviceData')); 

    if(data.settlementLat && data.settlementLng){ 
     this.settlementLat = data.settlementLat; 
     this.settlementLng = data.settlementLng; 
    } 

    } 

    openMap(){ 
    this.showMap = true; 
    setTimeout(()=> {this.loadMap()},500) 
    } 

    loadMap() { 
    this.map = GoogleMaps.create('statementMap', { 
     'camera': { 
     'target': { 
      "lat": parseFloat(this.settlementLat), 
      "lng": parseFloat(this.settlementLng) 
     }, 
     'zoom': 18 
     } 
    }); 

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => { 

     this.geoLocationOption = { 
     maximumAge: 0, 
     timeout : 15000, 
     enableHighAccuracy: true 
     }; 

     this.helper.presentLoading('Searching for GPS position...'); 
     this.getPosition(); 
    }); 
    } 

    getPosition(){ 
    this.geoLocation.getCurrentPosition(this.geoLocationOption).then((resp) => { 
     this.helper.closeLoading(); 
     this.lat = resp.coords.latitude; 
     this.lng = resp.coords.longitude; 

     let position: CameraPosition<ILatLng> = { 
     target: { 
      lat: this.lat, 
      lng: this.lng 
     }, 
     zoom: 18 
     }; 

     this.map.moveCamera(position); 

     this.map.addMarker({ 
     icon: 'blue', 
     animation: 'DROP', 
     draggable: true, 
     position: { 
      lat: this.lat, 
      lng: this.lng 
     } 
     }).then(this.updatePosition) 

    }).catch((error) => { 
     this.helper.closeLoading(); 
     this.map.destroy(); 
     this.helper.presentToast('Please turn on your gps...'); 
     this.showMap = false; 
    }); 
    } 

    updatePosition(marker: Marker){ 
    marker.one(GoogleMapsEvent.MARKER_DRAG_END).then(() => { 
     this.lat = marker.getPosition().lat; 
     this.lng = marker.getPosition().lng; 

     console.log(this.lat); 
     console.log(this.lng); 
    }); 
    } 

} 

答えて

1

は、この演算子など

getPosition(){ 
     this.geoLocation.getCurrentPosition(this.geoLocationOption).then((resp) => { 
     this.helper.closeLoading(); 
     var my_lat = resp.coords.latitude; 
     var my_lng = resp.coords.longitude; 

     let position: CameraPosition<ILatLng> = { 
      target: { 
      lat: this.lat, 
      lng: this.lng 
      }, 
      zoom: 18 
     }; 

     this.map.moveCamera(position); 

     this.map.addMarker({ 
      icon: 'blue', 
      animation: 'DROP', 
      draggable: true, 
      position: { 
      lat: my_lat, 
      lng: my_lng 
      } 
     }).then(this.updatePosition) 

     }).catch((error) => { 
     this.helper.closeLoading(); 
     this.map.destroy(); 
     this.helper.presentToast('Please turn on your gps...'); 
     this.showMap = false; 
     }); 
    } 

コードの不正な使用を避けてみ緯度とLNGのためのソリューションを提案するだけで、あなたは他人に他の問題を抱えていることができこの不適切な使用

+0

私のthis.latとthis.lngに手を差し伸べることはまだありませんでしたが、私はこれを削除しました.updatePositionとその代わりに太い矢印の機能を作成し、突然それらの変数はreacheblもう一度e。だから問題は解決し、努力のおかげで:) – trix87

関連する問題