Толкающие массивы в ионном 4 - PullRequest
Новая
       17

Толкающие массивы в ионном 4

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

У меня есть приложение Ionic, и я пытаюсь получить широту и долготу из API данных в формате Json для маршрута полета. Данные содержат массивы. Я хочу вставить массивы в карты Google polylin e, чтобы получить маршрут полета на карте, но я получаю сообщение об ошибке при запуске приложения.

Мой полный код: 

export class HomePage{
  map: GoogleMap;
  latitude: any;
  longitude: any;
  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();


  }

  getmarker(){
    this.http.get('xxxxxxx/v1/flight.json?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.longitude
      console.log(this.latitude,this.longitude)

      this.loadMap()
    })
  }

  loadMap() {


    let HND_AIR_PORT = this.latitude;
    let SFO_AIR_PORT = this.longitude

    let AIR_PORTS = [
      HND_AIR_PORT,
      SFO_AIR_PORT
    ];

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

Я получаю ошибку: 

ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'getPosition' in undefined
TypeError: Cannot use 'in' operator to search for 'getPosition' in undefined
    at getLatLng (plugins/cordova-plugin-googlemaps/www/Common.js:544)
    at Array.map (<anonymous>)
    at Object.convertToPositionArray (plugins/cordova-plugin-googlemaps/www/Common.js:575)
    at Map.addPolyline (plugins/cordova-plugin-googlemaps/www/Map.js:1231)
    at vendor.js:76340
    at GoogleMap.push../node_modules/@ionic-native/google-maps/index.js.GoogleMap.addPolylineSync (vendor.js:76352)
    at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home-home-module.js:126)
    at home-home-module.js:114
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2749)
    at Object.onInvoke (vendor.js:51123)
    at resolvePromise (polyfills.js:3189)
    at polyfills.js:3254
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51114)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
    at drainMicroTaskQueue (polyfills.js:2959)

Есть идеи?

1 Ответ

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

Я опишу, как достичь ответа с помощью шагов:

шаг1: понимание того, что происходит 

TypeError: Cannot use 'in' operator to search for 'getPosition' in undefined
    at getLatLng (plugins/cordova-plugin-googlemaps/www/Common.js:544)

Что касается журнала ошибок, ошибка происходит здесь. 

function getLatLng(target) {
  return 'getPosition' in target ? target.getPosition() : {
    'lat': parseFloat(target.lat, 10),
    'lng': parseFloat(target.lng, 10)
  };
}

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/d500b295b983c597dd99003ce8151c9d9d6e9ca5/www/Common.js#L542-L547

Ошибка говорит о том, что код плагина пытается проверить "getPosition" на неопределенность. Это означает, что переменная target не определена.

В настоящее время мы можем получить причину ошибки, которая you specified incorrect value.

step2: найти другие подсказки из журнала

Давайте выясним where ошибку в вашем коде. Проверяя журнал ошибок, вы также заметите этот журнал ошибок. 

at GoogleMap.push../node_modules/@ionic-native/google-maps/index.js.GoogleMap.addPolylineSync (vendor.js:76352)

Кажется, ошибка происходит в коде ниже. 

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

Плагин пытался получить lat и lng, но вы указали переменную AIR_PORTS.

step3: выяснить вашу ошибку

Давайте проверим переменную AIR_PORTS. 

let HND_AIR_PORT = this.latitude;
let SFO_AIR_PORT = this.longitude

let AIR_PORTS = [
  HND_AIR_PORT,
  SFO_AIR_PORT
];

Если вы знакомы с Google Maps API, вы, вероятно, заметите, что не так. Опрашивающий указал latitude для HND_AIR_PORT и longitude для SFO_AIR_PORT.

xxx_AIR_PORT означает одно местоположение. Это означает, что переменная должна быть в паре latitude и longitude.

Итак, по крайней мере, переменная должна быть сформирована следующим образом: 

let HND_AIR_PORT = {
  lat: ...,
  lng: ...
};

В это время мы выяснили, где ошибка в вашем коде.

step4: поиск ответа в Google

Хорошо, давайте найдем правильный ответ. Ключевое слово addPolylineSync. Выполняя поиск в Google, вы получите этот код и демонстрационную версию.

код https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/src/app/polyline/polyline.page.ts

демо https://mapsplugin.github.io/ionic-googlemaps-quickdemo-v4/polyline

enter image description here

В демонстрационном коде вы можете увидеть ответ. 

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
];

https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/src/app/polyline/polyline.page.ts#L30-L33

вывод

Я учу, как подойти к неизвестной ошибке, а не просто ответить.

Когда вы встречаете следующую ошибку,

  1. проверить журнал ошибок,
  2. проверьте код (если возможно),
  3. понять, что код хочет сделать,
  4. сначала найдите ошибку в вашем коде,
  5. читать документацию,
  6. Вы не можете решить проблему, даже выполнив вышеуказанные шаги, спросите кого-нибудь.

Кстати, коды cordova-plugin-googlemaps и @ionic-native/googlemaps полностью открыты. Нет скрытого кода вообще;)

...