在 ionic 4 中推送数组

Question

我有一个 Ionic 应用程序，我正在尝试从数据 api 中以 Json 格式获取航线的纬度和经度。数据包含数组。我想将数组推入 Google 地图 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

我描述了如何通过以下步骤得到答案：

第一步：了解发生了什么

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。

第 3 步：找出你的错误

让我们检查变量 AIR_PORTS。

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

let AIR_PORTS = [
  HND_AIR_PORT,
  SFO_AIR_PORT
];

如果您熟悉 Google 地图 API，您可能会注意到问题所在。提问者指定 latitude 为 HND_AIR_PORT，longitude 为 SFO_AIR_PORT。

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

所以，至少变量应该这样构成：

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

这时候，我们搞清楚了你代码中的bug在哪里。

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

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

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

结论

我教的是如何处理未知错误，而不仅仅是回答。

遇到下一个错误时，

检查错误日志，
检查代码（如果可能），
了解代码要做什么，
首先搜索代码中的错误，
阅读文档，
按照上面的步骤还是不能解决问题，请教高人。

对了，cordova-plugin-googlemaps和@ionic-native/googlemaps的代码都是全开的。完全没有隐藏代码 ;)

在 ionic 4 中推送数组

Pushing arrays in ionic 4

arrays

google-maps

angular

ionic4

第一步：了解发生了什么

step2: 从日志中找到另一个提示

第 3 步：找出你的错误

step4: 在 Google

结论