拖动标记不是刷新地址

时间:2017-03-03 06:41:04

标签: angular typescript ionic2

暂停代码Getaddress函数将在标记dragend事件发生时调用

    Getaddress(LastLat, LastLng , marker,source){
        this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ ','+LastLng )
                .map(res => res.json())
                .subscribe(data => {
              console.log(this.data); //json output
                this.data = data.results[0].formatted_address;
              console.log(this.data); //Right address
                this.Origin=" ";
                this.Origin=this.data;
              }
});

并在html中:

<ion-item> <ion-label >Origin</ion-label> <ion-input type="text" value={{Origin}}></ion-input> </ion-item>

标记dragend右侧地址将显示在控制台日志中。但是在input item中它只显示制造商的第一名,如果我点击input item,它将更改标记提及的最后地址或位置。我将input item更改为Label,但它无效。

更新1 dragend事件:

lastLatLng(marker,source){
      google.maps.event.addListener(marker, 'dragend', () =>{ 
      this.LastLat= marker.position.lat();
      this.LastLng= marker.position.lng();
      this.Getaddress(this.LastLat,this.LastLng, marker,source);    
    });
    }

1 个答案:

答案 0 :(得分:1)

您需要绑定该变量的值。您的代码正在设置value属性。

尝试:

<ion-item> <ion-label >Origin</ion-label> <ion-input type="text" [value]="Origin"></ion-input> </ion-item>

检查Angular模板语法property binding

更新:

创建回调函数:

setOriginAddress(data:any){
   this.data = data.results[0].formatted_address;
              console.log(this.data); //Right address
                this.Origin=" ";
                this.Origin=this.data;
}

//为dragevent创建一个类似的回调,而不设置this.Origin。

lastLatLng(marker,source){
      google.maps.event.addListener(marker, 'dragend', () =>{ 
      this.LastLat= marker.position.lat();
      this.LastLng= marker.position.lng();
      this.Getaddress(this.LastLat,this.LastLng, marker,source,this.setOriginAddress.bind(this));    
    });
    }

的getAddress

Getaddress(LastLat, LastLng , marker,source,callbackFn){
        this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ ','+LastLng )
                .map(res => res.json())
                .subscribe(callbackFn);