Ionic Google maps 找不到元素 [#map_canvas]

Question

我有一个 Ionic 应用程序，它使用 google 地图折线从数据 json api 中获取航线的纬度和经度。我想自动重新加载数据，在地图上查看实时数据。 l 添加设置Interval重新加载数据。数据已重新加载和控制台，但我在下面有错误并且地图上没有显示实时数据。

ERROR Error: Uncaught (in promise): Error: Can not find the element [#map_canvas]
Error: Can not find the element [#map_canvas]
    at vendor.js:76400
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51333)
    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 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2856)
    at ZoneTask.invoke (polyfills.js:2845)
    at timer (polyfills.js:4639)
    at resolvePromise (polyfills.js:3189)
    at resolvePromise (polyfills.js:3146)
    at polyfills.js:3250
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51333)
    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)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2860)
    at ZoneTask.invoke (polyfills.js:2845)

我的代码

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

setInterval(()=> {
  this.getmarker()
},4000); 

  }

  async getmarker() {
    this.http.get('xxxxxxx.json?flightId=4232343, {}, {})

      .then(data => {

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

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

        let polyline: Polyline = this.map.addPolylineSync({
          points: AIR_PORTS,
          color: '#AA00FF',
          width: 5,
          geodesic: true,
          clickable: true,


        });

        let points: Array<ILatLng> = this.points = []



      })
  }

html

  <div style="height: 100%;width: 100%" id="map_canvas"></div>

Answer 1

你能展示整个html吗？请确保父元素有一定的高度。 CSS 始终将百分比值视为父元素的百分比。

这个问题很多时候是分配了0px的高度引起的。这样想，地图 div 在初始化时是空的，父元素的高度为 0px。后面我们填地图的东西的时候就什么也看不到了，因为父级0px的高度100%就是0px。

<ion-content>
    <ion-card style="height: 50%">
        <div style="height: 100%;width: 100%" id="map_canvas"></div>
    </ion-card>
</ion-content>

确保父元素（即上例中的 ion-card）在 init 上有一定的高度。你可以设置一个固定的高度来测试，它会证明我的观点。

<div style="height: 200px;" id="map_canvas"></div>

祝你好运。

Ionic Google maps 找不到元素 [#map_canvas]

Ionic Google maps Can not find the element [#map_canvas]

google-maps

angular

ionic4