Question

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

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

$Form = New-Object System.Windows.Forms.Form
$Form.Size = New-Object System.Drawing.Size(400,400)
$Form.StartPosition = "CenterScreen"

$objTextBox1 = New-Object System.Windows.Forms.TextBox 
$objTextBox1.Multiline = $True;
$objTextBox1.Location = New-Object System.Drawing.Size(10,10) 
$objTextBox1.Size = New-Object System.Drawing.Size(300,400)
$objTextBox1.Scrollbars = "Vertical" 

$Form.Controls.Add($objTextBox1)

$output = Get-ComputerInfo -Property "os*"

$output.PSObject.Properties | ForEach-Object {
    $objTextBox1.Text = $objTextBox1.Text + "$($_.Name): $($_.Value)`r`n";
    #Write-Host "$($_.Name): $($_.Value)`r`n" 
}

$form.ShowDialog()| Out-Null

lat和lng最初设置为0.0

//地图属性

 <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>

我通过Web Api调用设置纬度和经度。

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;

我会想，因为我已经将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

如何在标记上居中放置agm地图？

2 个答案: