Question

我在Angular6中工作。我正在使用“ AGM-Angular Google Maps”绘制地图。

从后端获取经度和纬度后，我需要绘制地图。

请看看我的代码

app.component.ts

private lat:number;
private lng:number;

getSaloon () {
// show loader
this.saloon.vars.displayLoader (true);

// get saloon detail
this.saloon.getSaloon ().subscribe (res => {
  // update saloon-detail
  this.saloonDetail = res.data;

  // set saloon-form values
  this.setSaloonvarmValues ();

  // show loader
  this.saloon.vars.displayLoader (false);

  // show error
  this.saloon.vars.showNotification('Saloon detail successfully found', res.message, 'success');
}, err => {
  // show loader
  this.saloon.vars.displayLoader (false);

  // show error
  this.saloon.vars.showNotification(this.saloon.vars.convertObjectToString (err.errors), err.message);
})

}

Saloon.ts

export class Saloon {
    address:string;
    company_number:null;
    contact_number:number;
    header:string;
    id:number;
    lat:number;
    lng:number;
    logo_url:string;
    name:string;
    postal_code:string;
    shop_flag:string;
    standard_price:number;
    vat_number:string;
}

app.component.html

<agm-map 
    data-toggle="modal" 
    data-target="#googleMapAddressModal" 
    [latitude]="lat" 
    [longitude]="lng" 
    [disableDoubleClickZoom]="true" 
    [usePanning]="true" 
    [panControl]="true" 
    [zoomControl]="false" 
    [streetViewControl]="false">
              <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Answer 1

您只需像这样添加*ngIf：

<agm-map *ngIf="lat && lng" data-toggle="modal" data-target="#googleMapAddressModal" [latitude]="lat" [longitude]="lng" [disableDoubleClickZoom]="true" [usePanning]="true" [panControl]="true" [zoomControl]="false" [streetViewControl]="false">
              <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

您可能需要调整初始化lat和lng的值，但我希望这个主意很清楚

使用@ agm / core从angular6的服务器获取经度和纬度后加载Google地图

1 个答案: