Question

一旦我在实验室中运行应用程序，我就会收到以下错误：

错误类型错误：无法读取属性'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功能，应用程序开始产生大量标记，因此我在moveMarker函数中包含一个简单的 If / Else 。

这是我的最终代码：

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

离子3.谷歌地图api返回：'setposition undefined'当我尝试移动标记时

2 个答案: