拖动标记不刷新地方地址

dragging marker is not refreshing place address

我用 Angular Maps 和 Angular 6.

我需要在可拖动标记之间进行绑定,google 放置自动完成文本字段

它几乎可以正常工作,但我有一个奇怪的行为,当我从 latlng 对该地点进行地理编码时,我可以毫无问题地解析该地点,但在我将鼠标悬停在标记上之前,字段不会更新新值。

真的不知道这里发生了什么。

这是我的代码:

<form #form="ngForm" (ngSubmit)="onSubmit()">
    <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
      <agm-marker [latitude]="latitude" [longitude]="longitude"
                  (dragEnd)="markerDragEnd(latitude, longitude, $event)"
                  [markerDraggable]="true"></agm-marker>
    </agm-map>
    <input id="address" name="address" placeholder="search for location"
             type="text" class="form-control input-lg" #search [(ngModel)]="tournament.venue.address">
</form>

和组件:

export class TournamentEditVenueComponent implements OnInit {
  @Input() tournament: Tournament;
  loading = false;
  submitted = false;
  error = '';
  countries = COUNTRIES;
  public latitude: number;
  public longitude: number;
  public zoom: number;

  @ViewChild('search')
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
  ) {
  }

  markerDragEnd(lat, lng, $event: MouseEvent) {
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
    const geocoder = new google.maps.Geocoder();
    const latlng = new google.maps.LatLng(this.latitude, this.longitude);
    const request = {
      latLng: latlng
    };

    geocoder.geocode(request, (results, status) => {
        this.tournament.venue.address = results[0].formatted_address;
        console.log('1:' + this.tournament.venue.address);
    });
  }

  ngOnInit() {
    // set google maps defaults
    this.zoom = 4;
    this.latitude = parseFloat(this.tournament.venue.latitude);
    this.longitude = parseFloat(this.tournament.venue.longitude);
    // create search FormControl
    // set current position
    this.setCurrentPosition();

  }

  private setCurrentPosition() {
    // If no registered location, set it to current browser position
    if ('geolocation' in navigator && this.latitude == null && this.longitude == null) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 12;
      });
    }
  }


}

我错过了什么?

NgZone 中更新您的地址,以便 Angular 检测到更改:

geocoder.geocode(request, (results, status) => {
  this.ngZone.run(() => {
    this.tournament.venue.address = results[0].formatted_address;
  })
}); 

这是一个demo

markerDragEnd 中使用这样的弃用事件对我有用

$event: google.maps.MouseEvent

Documentation here.