Question

我尝试使用angular创建IONIC应用。我的应用程序包含在Google地图上，并且包含用于在地图上显示机场坐标的数据json API。我想根据延误指数更改机场图标的颜色。为此，我在一种方法上使用了两个参数，该方法负责图标机场和机场坐标。

方法名称addMarker()

我的代码：

export class HomePage implements OnInit {
  points: Array<any> = [];
  Data: any;
  map: GoogleMap;
  mags_icons: string;
  DelayAvg: any

  constructor(private http: HTTP) { }


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

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

  getData() {

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


      // coordinates 


      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
        }))
        console.log(this.points)

        this.points.forEach((point) => {

          this.addMarker(point);
        });



        // icons 

      this.DelayAvg = Object.keys(this.Data)
        .map(key => this.Data[key].stats.arrivals)
        .map((arrivals) => (
         arrivals.delayIndex

        ))
        console.log(this.DelayAvg)

      this.DelayAvg.forEach((icons: any) => {

        this.addMarker(icons)


        let mag = icons;

        switch (mag) {
          case 0:
          case 1.9:
            return this.mags_icons = './assets/icon/green.png';
          case 2:
          case 3.5:
            return this.mags_icons = './assets/icon/yellow.png';
          case 3.6:
          case 5:
            return this.mags_icons = './assets/icon/red.png';
          default:
            return "blue";
        }
      });



      console.log(this.mags_icons)

    })

  }

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



}

但问题是我在this.addMarker(icons)和this.addMarker(point);下遇到错误

错误是Expected 2 arguments, but got 1.

有什么想法吗？

Answer 1

使用以下方式实现您的目标。在地图功能中，该函数会返回具有位置和图标属性的新点对象。

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])
          .map((data) => {
            var point = {};
            point["location"] = { lat: data.airport.position.latitude, lng: data.airport.position.longitude };
            switch (data.stats.arrivals.delayIndex) {
              case 0:
                break;
              case 1.9:
                point["icon"] = './assets/icon/green.png';
                break;
              case 2:
                break;
              case 3.5:
                point["icon"] = './assets/icon/yellow.png';
                break;
              case 3.6:
                break;
              case 5:
                point["icon"] = './assets/icon/red.png';
                break;
              default:
                point["icon"] = './assets/icon/blue.png';
            }
            return point;
          });
        this.points.forEach((point) => {
          this.addMarker(point);
        });
      });
  }

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

}

一种方法中使用两个参数

1 个答案: