angular2-google-maps:即使拖动地图,标记也始终位于中心

时间:2019-07-15 06:15:15

标签: angular google-maps angular2-google-maps

我希望标记始终位于地图中心,并且地图可拖动(但标记保留在屏幕中心)。使用当前的实现,我能够得到结果,但是一个问题是,标记在拖动地图时首先移动,但是一旦停止拖动,标记就会再次居中。

在我的组件中,我按如下方式使用angular2-google-maps

            <agm-map (idle)="mapIdle()" (centerChange)="updateLatLong($event)" [latitude]="lat" [longitude]="lng" #agmMap [mapDraggable]="true" [fullscreenControl]="true" [streetViewControl]="false">
                <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
            </agm-map>

在上述组件打字稿文件中,函数定义如下:

getAddress(lat: number, lng: number) {
    if (navigator.geolocation) {
      const geocoder = new google.maps.Geocoder();
      const latlng = new google.maps.LatLng(lat, lng);
      const request = { location: latlng };
      geocoder.geocode(request, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          const result = results[0];
          if (result != null) {
            // Process Address
          }
        }
      });
    }
}

public handleAddressChange(address: Address) {
    this.lng = address.geometry.location.lng();
    this.lat = address.geometry.location.lat();
    this.getAddress(this.lat, this.lng);
}

updateLatLong(data: google.maps.LatLngLiteral) {
    this.tempLat = data.lat;
    this.tempLong = data.lng;
    this.getAddress(data.lat, data.lng);
}

updateMarker() {
    this.lat = this.tempLat;
    this.lng = this.tempLong;
    this.getAddress(this.lat, this.lng);
}

mapIdle() {
    if (this.tempLat && this.tempLong) {
      if (this.tempLat != this.lat || this.tempLong != this.lng) {
        this.updateMarker();
      }
    }
}

0 个答案:

没有答案