Google maps Ionic2:页面中不显示更新
我在ionic2项目中有一个页面,在google.maps中有一个标记。 当我移动这个标记(通过拖动)时,它会更新lat和long位置,在我的数据库中进行新的搜索,从而显示新的结果 此页面的类别如下所示:Google maps Ionic2:页面中不显示更新,google-maps,ionic2,Google Maps,Ionic2,我在ionic2项目中有一个页面,在google.maps中有一个标记。 当我移动这个标记(通过拖动)时,它会更新lat和long位置,在我的数据库中进行新的搜索,从而显示新的结果 此页面的类别如下所示: import { Component, ViewChild, ElementRef } from '@angular/core'; ... declare var google; @Component({ selector: 'page-search', templateU
import { Component, ViewChild, ElementRef } from '@angular/core';
...
declare var google;
@Component({
selector: 'page-search',
templateUrl: 'search.html'
})
export class SearchPage {
@ViewChild('map') mapElement : ElementRef;
map : any;
guideList : Array<Guide>;
text : any;
lat : any;
lon : any;
constructor (public navCtrl : NavController, public recoshService: Recosh, public alertCtrl : AlertController) {
this.text = {
title : this.recoshService.getMessage(1),
}
if(!this.recoshService.getOkGps()) this.showError(this.recoshService.getMessage(782));
this.refresh();
}
refresh(){
console.log("refresh called!");
this.lat = this.recoshService.getLat();
this.lon = this.recoshService.getLon();
this.loadGuides();
}
ngOnInit(){
this.loadMap();
}
loadGuides() {
console.log("loading guides...");
this.recoshService.getGuides().subscribe(
(data)=>{
if(data.success){
this.guideList = data.supports;
for(var i=0; i< this.guideList.length; i++){
if(this.guideList[i].guide==this.recoshService.getMyName()){
this.guideList.splice(i,1);
i--;
//break;
}
}
}else{
this.showError(this.recoshService.getMessage(data.message));
}
},
(err) => {
this.showError(err);
}
);
}
myInvitations() {
this.navCtrl.push(InvitationsPage);
}
mySupports() {
this.navCtrl.push(MySupportsPage);
}
showError(msg) {
let alert = this.alertCtrl.create({
title: 'Error',
subTitle: msg,
buttons: ['OK']
});
alert.present();
}
loadMap(){
let mapOptions = {
center:new google.maps.LatLng(this.lat,this.lon),
zoom:5
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
let marker = new google.maps.Marker({
position: this.map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: this.map,
});
google.maps.event.addListener(marker, 'dragend', () => {
this.recoshService.setLon(marker.getPosition().lng());
this.recoshService.setLat(marker.getPosition().lat());
console.log("refreshing...");
this.refresh();
console.log("refreshing done!");
});
}
}
您正在使用单向绑定传递
g
参数。此时,g
只是作为输入属性,当我们拖动标记时,该值不会进入控制器,然后来回移动
您是否尝试使用双向绑定?
让我知道这是否能帮助您。您能用与我的类相关的代码示例更好地解释它吗?
<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>
...
<ion-label>{{lat}}</ion-label>...<ion-label>{{lon}}</ion-label>
this.navCtrl.push(SearchPage);
this.navCtrl.pop();
this.navCtrl.push(SearchPage);