如何在标记上使agm-map居中？

Question

我正在尝试将google地图放在标记的中心，我得到的结果是：

​

​

​

我想要的最终结果是上面的图片。由于某种原因，它根本没有居中。下面是我的HTML代码：

 <div class="map-wrapper3">
    <section>
        <agm-map [latitude]="lat" [longitude]="lng" [zoom]="16" [minZoom]="4" [maxZoom]="16"
            [style.height]="mapHeight" [scrollwheel]="false">
            <agm-marker [latitude]="lat" [longitude]="lng"
                [iconUrl]="'assets/images/pin.png'" [title]="'You are here'">
                  <agm-info-window  
                   [isOpen]="true"
                  >
                    <div class="text-center" style="width: 200px">
                        <div class="restaurant-entry noborder text-center mt15 mb15">
                        </div>
                        <h5 class="wrap">{{merchantDetails.MerchantName}}
                          <span class="red fs13" *ngIf="merchantDetails.Status == 2"> (Currently offline)</span>
                        </h5>
                        <p class="wrap mb5">{{merchantDetails.Address}}, {{merchantDetails.Postcode}}</p>
                        <p class="wrap mb5 green">{{merchantDetails.Cusines}}</p>
                        <p class="wrap mb5">Contact Number: {{merchantDetails.ContactNumber}}</p>
                        <div class="mb5">
                          <a class="btn theme-btn-dash mt15" (click)="goProfile(merchantId)">View Menu</a>
                        </div>                            
                      </div>
                  </agm-info-window>
            </agm-marker>
        </agm-map>
    </section>
</div>

lat和lng最初设置为0.0

//map属性

public map: any;
  public lat: any = 0.0;
  public lng: any = 0.0;
  public pageData: any = [];
  public isIframe = false;
  public isSelfService = false;
  public isMobile = false;
  public mapHeight: any = 500;

我从Web Api调用中设置了lat和lng。

ini() {
    this.busy = this.httpService.get('Online/GetMerchant?id=' + this.merchantId).subscribe((rs: any) => {
      if (rs && rs.Merchant) {
        this.merchantData = rs;
        this.merchantDetails = this.merchantData.Merchant;
        this.lat = this.merchantDetails.Lat;
        this.lng = this.merchantDetails.Lng;
      } else {
        this.showBusy = false;
      }
    });
  }

我想，因为我已经将lat和lng设置为我从API调用中获得的数据，它应该自动将其设置为居中？但情况似乎并非如此..

提前谢谢你。

Answer 1

尝试在html中添加(mapReady)="mapReady($event)“

<agm-map
[latitude]="currentPosition.lat" 
[longitude]="currentPosition.lng" 
[zoom]="12"
(mapReady)="mapReady($event)"
style="height: 600px;">

并从那里设置地图的中心

mapReady(event: any) {
    this.lat = this.merchantDetails.Lat;
    this.lng = this.merchantDetails.Lng;
}

Answer 2

<agm-map style="width:100%;height:100%" [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker [latitude]="latitude" [longitude]="longitude" [agmFitBounds]="true"></agm-marker>
</agm-map>

您需要在agm-marker中将"agmFitBounds“添加到true