AGM Map标记不显示求助：Angular4中API数据无法更新地图

Hey there! Let's break down the most likely reasons your AGM map isn't updating after fetching JSON data from your API, and how to fix them:

1. Typos in Property Names (Immediate Fix!) #

Looking at your code snippet, you've got a critical typo: longtitude should be longitude (missing an 'i'). AGM's directives rely on exact property names for binding—if you're using this misspelled property in your template (like <agm-marker [longitude]="longtitude">), the binding will fail silently, and your map won't pick up any updated values.

Fix it by correcting the property name in both your component and template:

// Component code correction
public longitude: number = 8.9483832; // Corrected spelling

2. Async Data Isn't Properly Bound to AGM Markers #

API calls are asynchronous, so if you're fetching data after component initialization, you need to ensure the data is assigned to a property AGM can observe. Common missteps here:

• Forgetting to assign fetched data to the array used in your *ngFor for markers
• Modifying a plain array with methods like push() without ensuring change detection picks up the update

Here's a robust pattern using Angular's HttpClient to fetch and bind data correctly:

import { HttpClient } from '@angular/common/http';
// ...
export class HomeComponent implements OnInit {
  public PageTitle: string = 'Location';
  public latitude: number = 50.984795;
  public longitude: number = 8.9483832; // Corrected!
  public zoom: number = 7;
  public locations: any[] = []; // Array to hold API location data

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.fetchLocations();
  }

  fetchLocations(): void {
    this.http.get('your-api-endpoint-url').subscribe((data: any[]) => {
      this.locations = data; // Assign fetched data directly to the array
      // Optional: Center map on the first location
      if (this.locations.length > 0) {
        this.latitude = this.locations[0].latitude;
        this.longitude = this.locations[0].longitude;
      }
    });
  }
}

Then in your template, loop through the locations array to render markers dynamically:

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
  <agm-marker 
    *ngFor="let loc of locations" 
    [latitude]="loc.latitude" 
    [longitude]="loc.longitude">
  </agm-marker>
</agm-map>

3. Change Detection Isn't Triggered #

If your component uses ChangeDetectionStrategy.OnPush, or your API call runs outside Angular's zone (like with some third-party HTTP libraries), Angular might not detect the data update automatically.

Fix this by either:

• Wrapping your data assignment in NgZone.run() to bring it back into Angular's context:

  import { NgZone } from '@angular/core';
  // ...
  constructor(private http: HttpClient, private zone: NgZone) {}
  
  fetchLocations(): void {
    this.http.get('your-api-endpoint-url').subscribe((data: any[]) => {
      this.zone.run(() => {
        this.locations = data;
      });
    });
  }
  

• Or manually triggering change detection with ChangeDetectorRef:

  import { ChangeDetectorRef } from '@angular/core';
  // ...
  constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}
  
  fetchLocations(): void {
    this.http.get('your-api-endpoint-url').subscribe((data: any[]) => {
      this.locations = data;
      this.cdr.detectChanges(); // Force Angular to check for updates
    });
  }
  

4. API Data Structure Mismatch #

Double-check that your API's JSON structure matches what your component expects:

• If latitude/longitude values are returned as strings instead of numbers, parse them to numeric values:

  this.locations = data.map(loc => ({
    latitude: parseFloat(loc.latitude),
    longitude: parseFloat(loc.longitude)
  }));
  

• If the API uses different property names (like lat instead of latitude), either adjust your template bindings or map the data to match your component's property names.

5. AGM Module Isn't Properly Configured #

Ensure you've imported AgmCoreModule correctly in your AppModule with a valid Google Maps API key:

import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    // ... other modules
    AgmCoreModule.forRoot({
      apiKey: 'your-google-maps-api-key'
    })
  ]
})
export class AppModule {}

内容的提问来源于stack exchange，提问作者Wizeman1986