Question

在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: 15,
        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.setPosition({lat: this.lat, lng: this.lng});
    this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
  });

});

}
stopTracking() {
  console.log('stopTracking');
  this.watch.unsubscribe();

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

}

Answer 1

在标记移动时使用setCenter将地图居中。

this.zone.run(() => {
    this.lat = position.coords.latitude;
    this.lng = position.coords.longitude;
    this.marker.setPosition({lat: this.lat, lng: this.lng});

    this.map.setCenter({lat: this.lat, lng: this.lng});

    this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
  });

如何在离子2的可见区域内始终更换标记？

1 个答案: