Не могу отобразить список agm-маркеров, использующих ngFor в Angular 6 - PullRequest
Новая
       27

Не могу отобразить список agm-маркеров, использующих ngFor в Angular 6

0 голосов
/ 06 сентября 2018

Я использую agm-маркер для отображения списка маркеров. Список маркеров не отображается на карте с помощью ngFor. Я знаю, что должен использовать класс Number для широты и долготы, но я все еще не вижу маркеры.

googlemaps.component.html 

 <div class="row ">
    <div class="col-sm-6 ml-10 mr-10" >
    <agm-map [latitude]="lat" [longitude]="lng" style="height: 80vh"  *ngIf="mapReady">
        <agm-marker  *ngFor="let locationItem of allLocations" [latitude]="locationItem.latitude" [longitude]="locationItem.longitude">
        </agm-marker>
    </agm-map>
    </div>
    </div>

googlemaps.component.ts 

export class GoogleMapsComponent implements OnInit {

  lat = 30.2672;
  lng = -97.7431;
  allLocations: LocationData[] = new Array();
  mapReady = false;

  constructor(private googleMapsService: GoogleMapsService) {
  }

  ngOnInit() {
    this.allLocations = this.googleMapsService.getAllLocations();
    this.mapReady = true;
    console.log(this.allLocations);
     }
}

googlemaps.service.ts 

import {Injectable} from '@angular/core';
import {LocationData} from './location';

const allLocationsData = [{

  locationId: '1',
  locationTitle: 'IcenHaur',
  locationText: 'First Date.',
  hasImages: false,
  latitude: '30.259610',
  longitude: '-97.738238'
},
  {locationId: '2',
    locationTitle: 'DogWood',
    locationText: 'Second Date.',
    hasImages: false,
    longitude: ' 30.401192',
    latitude: '-97.722935'
  },
  {locationId: '3',
    locationTitle: 'KungFoo',
    locationText: '3rd Date.',
    hasImages: false,
    longitude: '30.259656',
    latitude: '-97.738217'
  },
  {locationId: '4',
    locationTitle: 'Shack512',
    locationText: 'Scenic Drive',
    hasImages: false,
    longitude: '30.462621',
    latitude: '-97.913168'
  }]

@Injectable({
  providedIn: 'root'
})

export class GoogleMapsService {

  getAllLocations(): LocationData[] {

    let allLocations = new Array();
    allLocationsData.forEach(location => {
        let locationObject = new LocationData();
      locationObject.hasImages = location.hasImages;
      locationObject.locationId = location.locationId;
      locationObject.locationTitle = location.locationTitle;
      locationObject.longitude =  Number(location.longitude);
      locationObject.latitude =  Number(location.latitude);
      locationObject.locationText = location.locationText;
      locationObject.hasImages = location.hasImages;
      allLocations.push(locationObject);
    });
    return allLocations;
  }
}

locations.ts 

export class LocationData {
  public locationId: string;
  public locationTitle: string;
  public locationText: string;
  public hasImages: boolean;
  public latitude: Number;
  public longitude: Number;
}
...