HTTP Google Maps Polyline - PullRequest
       4

HTTP Google Maps Polyline

0 голосов
/ 08 апреля 2019

У меня есть приложение Ionic, использующее карты Google.Я пытаюсь получить широту и долготу из данных json api для маршрута полета, а затем внедрить эти массивы данных в полилинию Карт Google.Получить данные json api работает нормально без проблем, но когда я помещаю объекты в Google Maps, я получаю ошибку

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

enter image description here

мои данные json url

оригинальный код

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

}

1 Ответ

1 голос
/ 08 апреля 2019

я думаю, что вы читаете данные и передаете данные в GoogleMap неверно, попробуйте следующее

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

здесь вы можете найти рабочий пример, который я пробовал с вашими данными - Пример Демо . И код отсюда Пример кода

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...