Ionic 3. Google Maps API возвращает: 'setposition undefined', когда я пытаюсь переместить маркер

Question

Как только я запускаю приложение в лаборатории, я получаю следующую ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'setPosition'

Маркер - это, в основном, ваша позиция на карте. Я хочу, чтобы маркер изменил положение при перемещении.

Ionic поддерживает функцию marker.setPostion?

Это мой home.ts код:

  getPosition(): void{
   this.geolocation.getCurrentPosition()
    .then(response => {
      this.loadMap(response);
    })
    .catch(error =>{
      console.log(error);
      this.loading.dismiss();
    })
    this.geolocation.watchPosition().subscribe((position) => {
      this.moveMarker(position);
    }, (err) => {
      console.log(err);
    });
    }

  loadMap(position: Geoposition){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let mapEle: HTMLElement = document.getElementById('map');

    let myLatLng = {lat: latitude, lng: longitude};

    // creates the map
    this.map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });
    //adds the marker
    google.maps.event.addListenerOnce(this.map, 'idle', () => {
      this.loading.dismiss();
      let marker = new google.maps.Marker({
        position: myLatLng,
        map: this.map,
        title: 'HI!! IM HERE!!',
      });
      this.marcador = marker;
      mapEle.classList.add('show-map');
      console.log(latitude, longitude);
    });
  }

  moveMarker(position: Geoposition){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let coords = new google.maps.LatLng(latitude, longitude);

    this.speed = position.coords.speed * 3.6;
    console.log(latitude, longitude);
    this.marcador.setPosition( coords);
    this.map.panTo(coords);
  }

Answer 1

Я наконец нашел решение, в основном я объявил переменную marker в начале класса.

После этого я скомпилировал приложение, и маркер начал двигаться! Но из-за функции watchPosition приложение начало порождать множество маркеров, поэтому я включил простой If / Else в функцию moveMarker.

Это мой окончательный код:

export class HomePage {

  marker: any=google.maps.Marker;
  map: any;
  speed: any = 0;
  loading: Loading;
  cont: any=0;

  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation,
    private loadCtrl: LoadingController
  ) {}

  ionViewDidLoad(){
    this.loading = this.loadCtrl.create();
    this.loading.present();
    this.getPosition();
  }

  getPosition(): void{
   this.geolocation.getCurrentPosition()
    .then(response => {
      this.loadMap(response);
    })
    .catch(error =>{
      console.log(error);
      this.loading.dismiss();
    })
    this.geolocation.watchPosition().subscribe((position) => {
      this.moveMarker(position);
    }, (err) => {
      console.log(err);
    });
    }

  loadMap(position: Geoposition){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let mapEle: HTMLElement = document.getElementById('map');

    let myLatLng = {lat: latitude, lng: longitude};

    // creates the map
    this.map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });
    //adds the marker
    google.maps.event.addListenerOnce(this.map, 'idle', () => {
      this.loading.dismiss();
      mapEle.classList.add('show-map');
      console.log(latitude, longitude);
    });
  }

  moveMarker(position: Geoposition){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    let coords = new google.maps.LatLng(latitude, longitude);

    if(this.cont<1){
    this.marker = new google.maps.Marker({
      position: coords,
      map: this.map,
      title: 'HI!! HI´M HERE!',
    });
    this.cont=this.cont + 1;
    }
    else{
      this.marker.setPosition(coords);
      this.map.panTo(coords);
    }
    this.speed = position.coords.speed * 3.6;
    console.log(latitude, longitude);
  }

}

Answer 2

Попробуйте:

this.subscription = Geolocation.watchPosition().subscribe(position => {
    if ((position as Geoposition).coords != undefined) {
      var geoposition = (position as Geoposition);
      console.log('Latitude: ' + geoposition.coords.latitude + ' - Longitude: ' + geoposition.coords.longitude);
    } else { 
      var positionError = (position as PositionError);
      console.log('Error ' + positionError.code + ': ' + positionError.message);
    }
});