在 ionic 4 中推送数组

Question

我有一个 Ionic 应用程序，我正在尝试从数据 api 中获取 Json 格式的纬度和经度，用于飞行路线。数据包含数组。我想将数组推送到谷歌地图polyline 以获取地图上的飞行路线，但运行应用程序时出现错误。

我的完整代码：

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)

有什么想法吗？

Answer 1

我描述了如何通过步骤得出答案：

第 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。

第三步：找出你的错误

让我们检查变量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，您可能会注意到问题所在。 提问者为HND_AIR_PORT 指定latitude，为SFO_AIR_PORT 指定longitude。

xxx_AIR_PORT 表示一个位置。 这意味着变量应该与latitude和longitude配对。

所以，至少变量应该是这样形成的：

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

此时，我们找出了您代码中的错误所在。

第四步：在谷歌上搜索答案

好的，让我们搜索正确的答案。 关键字是addPolylineSync。 在谷歌上搜索，你会得到这个代码和演示。

代码 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

在演示代码中，你可以看到答案。

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的代码都是全开的。 完全没有隐藏代码；）