Html 谷歌地图上使用Angular 6的标记

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

.ts

.html

什么地方是这样的

位置=[{'id'：1，'lat'：'43'，long:'-12'}，{'id'：2，'lat'：'34'，long:'-15'}，{'id'：3，'lat'：'13'，long:'-12'}]

问题是，我从服务中获取了这个位置数组，它具有正确的值，但在mapReady函数中，当我需要数组中的纬度和经度时，它是未定义的

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

---

谢谢你抽出时间

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

由于您使用的是角度贴图，所以等待贴图准备就绪的一种方法是使用内部的指令

例如：

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

---

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

由于您使用的是角度贴图，所以等待贴图准备就绪的一种方法是使用内部的指令

例如：

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

mapReadymap由组件发出的输出调用，该输出可能在您的ngOnInit完成之前发出，这就是为什么您的this.locations未定义的原因

当地图准备就绪时，尝试获取您的位置，这样您就不会未定义

模板：

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

mapReadymap由组件发出的输出调用，该输出可能在您的ngOnInit完成之前发出，这就是为什么您的this.locations未定义的原因

当地图准备就绪时，尝试获取您的位置，这样您就不会未定义

模板：

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