Javascript 如何将Agm地图以角度和固定标记移动到中心，并更新lat和lng？

在我的angular 9应用程序中，我使用

@agm/core

显示地图，并在地图上显示一个标记，maker是可拖动的，但我希望标记应固定在中心，地图停止移动时地图应可移动，然后更新lat和lng如何在angular中执行此操作。提前谢谢

这是我的组件

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

    }

    ngOnInit() {
        //load Places Autocomplete
        this.mapsAPILoader.load().then(() => {
            this.setCurrentLocation();
            this.geoCoder = new google.maps.Geocoder;

            let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
            autocomplete.addListener("place_changed", () => {
                this.ngZone.run(() => {
                    //get the place result
                    let place: google.maps.places.PlaceResult = autocomplete.getPlace();

                    //verify result
                    if (place.geometry === undefined || place.geometry === null) {
                        return;
                    }

                    //set latitude, longitude and zoom
                    this.latitude = place.geometry.location.lat();
                    this.longitude = place.geometry.location.lng();
                    this.zoom = 12;
                });
            });
        });
    }

    // Get Current Location Coordinates
    private setCurrentLocation() {
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition((position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
                this.zoom = 8;
                this.getAddress(this.latitude, this.longitude);
            });
        }
    }

这是我的视图代码

  <agm-map #gm [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
            (dragEnd)="markerDragEnd($event)" (mouseOver)="onMouseOver(infoWindow,gm)"
            (mouseOut)="onMouseOut(infoWindow, $event)">
            <agm-info-window [isOpen]="false" #infoWindow>
                <a class="btn btn-attention pull-right">
                    Press the Red Location Pin, then move the Pin to your location。
                    <i class="fa fa-angle-double-right"></i>
                </a>
            </agm-info-window>
        </agm-marker>

    </agm-map> 

按下红色定位销，然后将定位销移动到您的位置

固定地图标记

您可以使用普通CSS来实现此ie：

<div class="map">
  <agm-map
 ...
  ></agm-map>
  <div class="map-center-overlay">
    <img src="../assets/marker.svg" width="30" height="30">
  </div>
</div>

您也可以使用

在拖动端更新横向/纵向

您希望附加到地图拖动结束事件，而不是标记（因为您不会拖动标记）

地图上的
dragEnd
事件似乎没有直接公开（请参阅），但可以通过如下方式实现：

<agm-map
  ...
  (centerChange)="centerChanged($event)"
  (mapReady)="mapReady($event)"
  ></agm-map>    

public centerChanged(coords: LatLngLiteral) {
    this.centerLatitude = coords.lat;
    this.centerLongitude = coords.lng;
  }

public mapReady(map) {
  map.addListener("dragend", () => {
    // do something with centerLatitude/centerLongitude
    });
  }

像个魔术师一样工作！
<agm-map
  ...
  (centerChange)="centerChanged($event)"
  (mapReady)="mapReady($event)"
  ></agm-map>    

public centerChanged(coords: LatLngLiteral) {
    this.centerLatitude = coords.lat;
    this.centerLongitude = coords.lng;
  }

public mapReady(map) {
  map.addListener("dragend", () => {
    // do something with centerLatitude/centerLongitude
    });
  }