Question

我在Angular 6中使用Angular Maps。

我需要在可拖动标记和Google地方自动填充文本字段之间绑定

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

真的不知道这是怎么回事。

这是我的代码：

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


}

我想念什么？

Answer 1

在NgZone中更新您的地址，以便Angular可以检测到更改：

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

这里是demo

Answer 2

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

$event: google.maps.MouseEvent

Documentation here.

拖动标记未刷新地点地址

2 个答案: