Google maps Ionic2:页面中不显示更新

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

我在ionic2项目中有一个页面,在google.maps中有一个标记。 当我移动这个标记(通过拖动)时,它会更新lat和long位置,在我的数据库中进行新的搜索,从而显示新的结果

此页面的类别如下所示:

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