使用Angular 6在谷歌地图上标记答案

【问题标题】：markers on google maps using Angular 6使用Angular 6在谷歌地图上标记
【发布时间】：2019-07-21 09:40:37
【问题描述】：

我的数据库中有一个地理位置列表，并将它们存储在一个变量中，如下所示：

.ts

  ngOnInit() {
    this.getListings()
  }

  getListings() {
    this.serviceHomeScreen.getAllListingsDetails().subscribe((data) => {
      this.extractlistings(data[0])
    })
  }

  extractlistings(data) {
    this.locations = data

    console.log(this.locations[1]) // has the right value
  }

  mapReady(map) {
    console.log(this.locations[1]) // undefined

    for (let i = 0; i < this.locations.length; i++) {
      console.log("aici")
      new google.maps.Marker({
        position: { lat: this.locations[i].lat, lng: this.locations[i].long },
        map: map,
      });
    }
  }

.html

<agm-map id="map_" [zoom]="30" [fitBounds]="true" [latitude]="lat" [longitude]="lng" [streetViewControl]="false" [zoomControl]="false" (mapReady)="mapReady($event)"></agm-map>

位置是这样的

locations = [{'id': 1, 'lat': '43', long: '-12'}, {'id': 2, 'lat': '34', long: '-15'}, {'id': 3, 'lat': '13', long: '-12'}]

问题是我从服务中得到了这个locations 数组，它有正确的值，但是在mapReady() 函数内部，当我需要数组中的纬度和经度时，是undefined。

这是为什么呢？ mapReady 在 ngOnInit 之前被调用？

感谢您的宝贵时间！

【问题讨论】：

标签： html angular google-maps angular6

【解决方案1】：

我认为问题不在于 mapReady 在 ngOnInit 之前被调用，而是 mapReady 在 getAllListingsDetails 返回值之前被调用。

由于您使用的是角度地图，因此等待地图准备好的一种方法是在<agm-map> 中使用<agm-marker> 指令。

例如：

<agm-map>
            <agm-marker *ngFor="let m of markers; let i = index"
                        [latitude]="m.lat"
                        [longitude]="m.lng"
                        label="{{ i + 1 }}">
                <agm-info-window>
                    <strong>InfoWindow content</strong>
                </agm-info-window>
            </agm-marker>
</agm-map>

【讨论】：

这是我以前的解决方案，但我想这样做，因为它更容易我接下来要开发的东西。无论如何，谢谢！

【解决方案2】：

mapReady(map) 由<agm-map> 组件发出的输出调用，该输出可以在您的ngOnInit() 完成之前发出，这就是为什么您会为this.locations 获得undefined。

尝试在地图准备好后获取您的位置，然后您将无法获得undefined。

mapReady(map) {

    this.serviceHomeScreen.getAllListingsDetails().subscribe((data) => {
        this.locations = data[0];

        for (let i = 0; i < this.locations.length; i++) {
            console.log("aici")
            return new google.maps.Marker({
                position: { lat: this.locations[i].lat, lng: this.locations[i].long },
                map: map,
            });
       }    
    })            
}

另一种方法是继续在ngOnInit 上获取数据，但设置一个标志，例如this.dataLoaded = true 数据加载完成时。然后，您将在 <agm-map> 组件模板上的 *ngIf 中使用此属性，以便仅在数据准备好时加载组件。然后，当发出 (mapReady) 并调用 mapReady(map) 时，数据将可用。

dataLoaded = false;

ngOnInit() {
    this.getListings()
}

getListings() {
    this.serviceHomeScreen.getAllListingsDetails().subscribe((data) => {
      this.extractlistings(data[0]);
    })
}

extractlistings(data) {
    this.locations = data;
    this.dataLoaded = true;
    console.log(this.locations[1]); // has the right value
}

mapReady(map) {

    console.log(this.locations[1]); // now defined

    for (let i = 0; i < this.locations.length; i++) {
        console.log("aici")
        return new google.maps.Marker({
            position: { lat: this.locations[i].lat, lng: this.locations[i].long },
                map: map,
        });
    }              
}

模板：

<agm-map 
*ngIf="dataLoaded" 
id="map_" 
[zoom]="30" 
[fitBounds]="true" 
[latitude]="lat" 
[longitude]="lng" 
[streetViewControl]="false" 
[zoomControl]="false" 
(mapReady)="mapReady($event)">
</agm-map>

【讨论】：