时间戳

首页 > 解决方案 > 循环 json 对象键以添加 Google 地图数据

json - 循环 json 对象键以添加 Google 地图数据

问题描述

我有使用 angular 的离子应用程序。我正在尝试从 JSon API url 获取对象，从服务器获取纬度和经度的内容。对象键上的数据 json api 内容和这些键一直在变化。我只想获取这些对象键内的坐标并将其添加到谷歌地图标记以在地图上显示。

我的代码

    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
        });


      }


    }

短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
      }
    }
  }
}

完整的 Json 网址

当我运行我的应用程序时，地图上什么也没有，没有任何标记，控制台中也没有显示错误。

安慰

谷歌地图插件文档

标签： jsonangulargoogle-maps

解决方案

点变量的问题是因为它是一系列点细节。您必须一一添加所有标记，在这里我指出您遇到问题的确切位置。

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
        });
      }   

}

推荐阅读