拖动后Googlemaps原生获取标记位置

时间:2017-12-19 09:43:12

标签: angular google-maps ionic3 ionic-native

我正面临着一个奇怪的问题,就是设置标记拖动结束时所提供的新坐标'监听器。当我尝试设置我的变量this.lat和this.lng时,甚至当尝试控制台在事件监听器中注销它时我得到以下错误:

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

}

如果这两个变量不可达或者我不知道就好了。试着调试它3个小时,但没有任何运气。也许我只是没有注意到某些事情,所以任何帮助都会有很大的帮助。有问题的函数是updatePosition,其他一切正常。

这是我的代码:

{{1}}

1 个答案:

答案 0 :(得分: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;
      });
    }

代码建议lat和lng的解决方案只是你可能有其他问题对别人不当使用