时间戳

首页 > 解决方案 > 使用 @agm/core 从 angular6 中的服务器获取纬度和经度后加载谷歌地图

angular - 使用 @agm/core 从 angular6 中的服务器获取纬度和经度后加载谷歌地图

问题描述

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

}

轿车.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>

标签： angularangular6angular-google-maps

解决方案

您只需添加*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>

您可能需要调整 initlat和lng值，但我希望这个想法很清楚

推荐阅读