【问题标题】:How to move marker over map in ionic2?如何在ionic2中的地图上移动标记?
【发布时间】:2017-12-29 06:31:16
【问题描述】:

在此代码中,我尝试在更改位置时移动marker,但似乎有问题。标记没有替换。

declare var google;
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html',
  providers: [Geolocation]
})
export class Page1 {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  public marker =[];
  public lat;
  public lng;
  public speed = '0';
  public watch: any;

  constructor(public navCtrl: NavController, public Geolocation: Geolocation, public zone: NgZone,
  ){      }
ionViewDidLoad(){
  this.loadMap();
  this.startTracking();        
  }
  loadMap(){
          this.Geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: latLng,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }     
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 this.addMarker();
    }, (err) => {
      console.log(err);
    });      
  }

  startTracking() {
  let config = {
    desiredAccuracy: 0,
    stationaryRadius: 20,
    distanceFilter: 10, 
    debug: true,
    interval: 2000 
  };     
let options = {
  frequency: 3000, 
  enableHighAccuracy: true
};     
this.watch = this.Geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {
  this.zone.run(() => {
    this.lat = position.coords.latitude;
    this.lng = position.coords.longitude;
    this.marker[0].lat= position.coords.latitude;
    this.marker[0].lng= position.coords.longitude;
    this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
  });

});

}
addMarker(){

 let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
  });

 this.marker.push(marker);
 console.log(this.marker);
}
}

}

【问题讨论】:

    标签: google-maps-api-3 ionic2 google-geolocation


    【解决方案1】:

    使用setPosition 移动标记。试试这个

    this.zone.run(() => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
    
        this.marker.setPosition( { lat: this.lat, lng: this.lng });
    
        this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
      });
    

    【讨论】:

    • 感谢您的帮助。我遇到的一个问题是,当标记远距离替换时,它会超出当前地图区域。如何将标记保持在屏幕中心或当制造商到达屏幕边框时自动将地图拖到可见区域。
    • @Reza,你能添加一个新问题或为此编辑这个问题吗?
    • 是的,我会发布一个新问题。
    猜你喜欢
    • 2017-10-20
    • 1970-01-01
    • 2013-04-26
    • 2013-09-13
    • 1970-01-01
    • 2017-04-08
    • 2016-10-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多