2

En code de mise en jachère lorsque se substitue sur de longues distances, il passe à l'extérieur de l'écran, par conséquent l'utilisateur doit faire glisser manuellement la carte pour conserver le marqueur dans la zone centrale/visible de l'écran. Y at-il un moyen possible de garder le marqueur sur la carte dans la zone visible?comment continuer à remplacer le marqueur toujours dans la zone visible dans ionique 2?

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

} 
+0

Cette solution a-t-elle fonctionné pour vous? –

+0

Oui Tnx beaucoup. il a résolu mon autre problème aussi. – RSA

Répondre

2

Utilisez setCenter pour déplacer la carte du centre lorsque le marqueur se déplace.

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