如何在ionic2中在地图上移动标记?



在此代码中,我尝试在更改位置时移动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);
}
}
}

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

相关内容

  • 没有找到相关文章

最新更新