Циклические ключи объектов json для добавления данных Google Maps

Question

У меня есть ионное приложение с использованием угловых.Я пытаюсь получить объекты из URL JSon API, содержимое по широте и долготе с сервера.Содержимое данных json api на ключах объектов и эти ключи постоянно меняются.Я хочу получить только координаты внутри этих ключей объектов и добавить их в маркер карты Google для показа на карте.

мой код

    export class HomePage implements OnInit {
      point:any
      Data :any
      map: GoogleMap;



      constructor(private http : HTTP) {}


      ngOnInit(){

        this.getData()

      }

   //// Getting json response //// 

      getData(){

        this.http.get("xxxxxxx", {}, {}).then(data =>{

        this.Data = JSON.parse(data.data)


        this.point= Object.keys(this.Data).map(key => this.Data[key].airport.position).map(({
          latitude,
          longitude
         }) => ({
          lat: latitude,
          lng: longitude
         }))
         console.log(this.point)



        }).then(()=>{

          this.loadMap()
        })
      }


      //// inject coordinates into google map ////

      loadMap() {

    this.map = GoogleMaps.create('map_canvas');



        ////// icon marker here ////

        let marker: Marker = this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: this.point
        });


      }


    }

short Json

  {
  "ABQ": {
    "airport": {
      "name": "Albuquerque International Airport",
      "code": {
        "iata": "ABQ",
        "icao": "KABQ"
      },
      "position": {
        "latitude": 35.040218,
        "longitude": -106.609001,
        "altitude": 5355
      }
    }
  },
  "ACE": {
    "airport": {
      "name": "Lanzarote Airport",
      "code": {
        "iata": "ACE",
        "icao": "GCRR"
      },
      "position": {
        "latitude": 28.945459,
        "longitude": -13.6052,
        "altitude": 47
      }
    }
  }
}

FULL Json url

, когда я запускаю мое приложение, у меня ничего не появляется на карте, нет маркеров вообще, также в консоли не отображаются ошибки.

Плагин Google Map Doc

Answer 1

Проблема с точечной переменной, потому что это массив точечных данных. Вы должны добавить все маркеры один за другим, и здесь я указываю точное место, где у вас есть проблема.

let marker: Marker = this.map.addMarkerSync({
    title: 'Ionic',
    icon: 'blue',
    animation: 'DROP',
    position: this.point    // issue in here because trying to make the position by an array
});

Решение состоит в том, чтобы определить функцию для добавления маркеров, просматривая каждую точку в массиве точек, и я переименовываю ее в точки для решения, потому что оно имеет смысл.

// You can use forEach as well on points
for(var i = 0; this.points.length; i++){
    addMarker(points[i]);
}

addMarker(point: any){
    return this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: point
    });
}

Полный код обновляется следующим образом,

import { HttpClient } from '@angular/common/http';

export class HomePage implements OnInit {

      points: Array<any> = [];
      Data: any;
      map: GoogleMap;

      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.loadMap();
        this.getData();
      }

      loadMap() {
        this.map = GoogleMaps.create('map_canvas');
      }

      getData() {
        this.http.get("<URL>").
          subscribe((data) => {
            this.Data = JSON.parse(data.data);
            this.points = Object.keys(this.Data)
              .map(key => this.Data[key].airport.position)
              .map((position) => ({
                lat: position.latitude,
                lng: position.longitude
              }));
            this.points.forEach((point) => {
              this.addMarker(point);
            });
          });
      }

      addMarker(point: any) {
        return this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: point
        });
      }   

}