web-dev-qa-db-ja.com

ngforからレンダリングされないagmマーカー

私はangularにかなり慣れておらず、基本的な問題だと思うものがあります。

私は私の地図を次のように作成します

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="location.lat" [longitude]="location.lng" *ngFor="let location of locations; let i=index">
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
            <ng-template>
                <strong>{{location.title}}</strong>
                <p>adresse</p>
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>

マーカーを手動で設定するとすべてが機能しますが、*ngForを使用してリストをループすると、マーカーのhtmlが作成されますが、マップのスクリプトがマーカーを検索した後、マーカーがレンダリングされないようです（マップ自体は）です。

私のコントローラーから：

export class LocationMapComponent implements OnInit {

 lat: number = 51.678418;
 lng: number = 7.809007;
 locations: Location[];

 async ngOnInit() {

}

public async getLocations()  {
    this.locations = await this._locationService.getLocations();

}

constructor(private _locationService:LocationService, private _coreCOMService: CoreCOMService, private _coreLanguageService: CoreLanguageService, private _coreLogService: CoreLogService, private _componentFactoryResolver: ComponentFactoryResolver, private _coreSystemService: CoreSystemService) {

    this.getLocations();
}

}

場所は、リモートデータベースから場所を取得するサービスから読み込まれます。問題は、ngForループが実行される前にマップがレンダリングされることだと思いますが、ループが最初に実行されることを確認する方法がわかりませんORマップに（re -）ループが完了した後にのみマーカーをレンダリングします。

言ったように、これはおそらくかなり基本的なことですが、私は今、途方に暮れています、ありがとう。

angularngforangular-google-maps
8
user3154108

緯度/経度は数値タイプである必要があります。 APIまたはある種のサービスから文字列として返される場合は、変換する必要があります。私の経験から、厳密に数値として入力する必要があるようです。

13
Dale

マーカーの表示に関しては、ngForで発生する問題を解決する必要があります。

APIからデータ（緯度、経度）を収集しましたが、バインドできません。

タイプが「数値」として検出されないことが原因である可能性があります。

map.interface.ts：

export interface Marker {
    lat: number[];
    lng: number[];
 }

map-location.ts：

import { CapacitorBanksService } from '../../services/capacitorBanks.service';
import { Component, OnInit} from '@angular/core';
import { AuthService } from '../../services/auth/auth.service';
import { Marker } from './map.interface';

@Component({
  selector: 'mdb-map-location',
  templateUrl: './map-location.component.html',
  styleUrls: ['./map-location.component.scss'],
  providers: [AuthService, CapacitorBanksService]
})

export class MapLocationComponent implements OnInit {

  localCustomer = localStorage.getItem('customer_id');
  subscriptions: any;

  latitude: number = 40;
  longitude: number = 0;

  lat: number[] = [];
  lng: number[] = [];

  markers: Marker[] = [{
    lat: this.lat,
    lng: this.lng,
}];

  constructor(public authService: AuthService, public cbank: CapacitorBanksService) { }

  ngOnInit(): void {

    this.cbank.getCapacitorBanks(this.localCustomer).subscribe(ires => {
      let data: any;
      data = ires.data;

      data = data.map(index => {
        return index.id.id;
      });

      let indexx = 0;
      const interval = setInterval(() => {
        if ( data[indexx] ) {
          this.subscriptions = this.cbank.getAssetAttributesServer(this.localCustomer, data[indexx]).subscribe(vres => {

            const myObj = vres;

            Object.keys(myObj).forEach(key => {
              if (myObj[key].key === 'latitude') {
                  this.lat.Push(myObj[key].value);
              }
            });

            Object.keys(myObj).forEach(key => {
              if (myObj[key].key === 'longitude') {
                  this.lng.Push(myObj[key].value);
              }
            });
            indexx ++;
          });
        } else {
          this.subscriptions.unsubscribe();
        }

        if ( indexx >= data.length - 1 ) {
          clearInterval(interval);
        }
      }, 400);
      console.log('COORD: ', this.markers);

    });
  }

}

そしてこれはmap-location.component.htmlです：

<div id="content">
    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="6">
        <agm-marker-cluster>
            <!-- <agm-marker *ngFor="let marker of markers; let i=index" 
            <agm-marker *ngFor="let marker of markers; let i=index" [latitude]="marker.lat[i]" [longitude]="marker.lng[i]"></agm-marker>
        </agm-marker-cluster>
    </agm-map>
</div>

これは配列のconsole.logです

0
Ruben GH