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

Question

在我的 Angular 9 应用程序中，我使用 @agm/core 来显示地图并在地图上显示标记，并且制造商是可拖动的，但我希望标记应该固定在中心，并且当地图移动停止时地图应该是可移动的，然后更新 lat 和 lng我怎么能以角度做到这一点。提前致谢。

this is my project demo image

这是我的组件

 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> 

Answer 1

固定地图标记

您可以使用普通的 CSS 来实现，即：

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

和 CSS：

.map {
  position: relative;
}

.map-center-overlay {
  margin: 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

您也可以使用<agm-marker> 来实现此目的，但使用固定位置会有一些复杂性，请参见此处：Can I give an anchor to a marker in agm/core?

在拖动结束时更新纬度/经度

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

似乎地图上的dragEnd事件没有直接暴露（见https://github.com/SebastianM/angular-google-maps/issues/1092），但可以这样实现：

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

堆栈闪电战

这是一个有效的堆栈闪电战（查看控制台以查看拖动端的纬度/经度）：https://stackblitz.com/edit/so-agm-map-centre-marker?file=src%2Fapp%2Fmap.component.ts