离子 3.谷歌地图 api 返回："设置位置未定义"当我尝试移动标记时

Question

当我在实验室中运行该应用程序时，我会收到以下错误：

错误类型错误：无法读取属性"设置位置">

标记基本上是你在地图上的位置。我希望标记在您移动时改变位置。

Ionic是否支持marker.setPostion功能？

这是我的家.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

我终于找到了解决方案，基本上我在类的开头声明了标记变量。

之后，我编译了应用程序，标记开始移动！但是由于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);
}
});