1

我试图将谷歌地图集中在标记上，我得到的是：地图不以标记为中心

以标记为中心的地图

我想要的最终结果是上面的图片。由于某种原因，它根本没有居中。这是我的 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

//地图属性

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 调用获得的数据，它应该自动将其设置为居中？不过好像不是这样。。

先感谢您。

4

2 回答 2

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;
}
于 2021-03-16T14:12:29.183 回答
0 
<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

于 2021-05-06T09:14:41.180 回答