HTTP谷歌地图折线

Question

我有一个使用谷歌地图的离子应用程序。我试图从数据json api获取航班路线的纬度和经度，然后将数据数组注入谷歌地图折线。获取数据json api工作正常没有问题，但是当我把对象放入谷歌地图时我得到错误

ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'getPosition' in 40.11882
TypeError: Cannot use 'in' operator to search for 'getPosition' in 40.11882
    at getLatLng (Common.js:544)
    at Array.map (<anonymous>)
    at Object.convertToPositionArray (Common.js:575)
    at Map.addPolyline (Map.js:1231)
    at vendor.js:76340

我的代码

export class HomePage{
  map: GoogleMap;
  latitude: any;
  longitude: any;
  dates=[]
  constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private http: HTTP
    ) { }

  ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    this.platform.ready();
    this.getmarker();
     this.loadMap();


  }

  async getmarker(){
       this.http.get('/v1/flightjson?flightId=201',{},{})

    .then( data=>{

      // this.latitude = JSON.parse(data.data).result.response.data.flight.track.latitude
      // this.longitude = JSON.parse(data.data).result.response.data.flight.track

      for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
        this.longitude = datas.longitude
        this.latitude  = datas.latitude

        console.log(this.longitude, this.latitude)
      }




    })

  }

  loadMap() {


    let AIR_PORTS = [

      this.longitude = datas.longitude
        this.latitude  = datas.latitude

    ];
    console.log(AIR_PORTS)


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

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }
}

AIR_PORTS的控制台日志

my data json url

original code

export class PolylinePage implements OnInit {

  map: GoogleMap;

  constructor(private platform: Platform) { }

  async ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    let HND_AIR_PORT = {lat: 35.548852, lng: 139.784086};
    let SFO_AIR_PORT = {lat: 37.615223, lng: -122.389979};
    let HNL_AIR_PORT = {lat: 21.324513, lng: -157.925074};
    let AIR_PORTS = [
      HND_AIR_PORT,
      HNL_AIR_PORT,
      SFO_AIR_PORT
    ];

    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: AIR_PORTS
      }
    });

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }

}

Answer 1

我认为您阅读数据和将数据传递到Google地图的方式不正确，请尝试以下操作

export class HomePage{
  map: GoogleMap;
  points: {lng: number, lat: number}[] = [];

  constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private http: HTTP
    ) { }

  ngOnInit() {
    this.platform.ready();
    this.getmarker();
    this.loadMap();
  }

  async getmarker(){
       this.http.get('/v1/flightjson?flightId=201',{},{})

    .then( data=>{

      for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
        this.points.push({lng: datas.longitude, lat: datas.latitude});
      }
    })
  }

  loadMap() {


    let AIR_PORTS = this.points;
    console.log(AIR_PORTS)


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

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }
}

你可以在这里找到一个我用你的数据尝试的工作示例 - Example Demo。和来自这里的代码Example Code