Question

我正在使用agm-marker显示标记列表。使用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;
}

Answer 1

我认为您需要使用Number构造函数将这些数字显式转换为Number。 TypeScript仅提供有关类型转换的帮助和提示，不会显式地将其从字符串转换。

在Angular 6中无法使用ngFor显示agm标记列表

1 个答案: