Error: Can not find the element [#map_canvas]

Question

我有一个使用 @ionic-native/google-maps 的 Ionic 4 应用程序。我收到以下错误：

ERROR Error: Uncaught (in promise): Error: Can not find the element [#map_canvas]
Error: Can not find the element [#map_canvas]

这里是info.page.html:

<ion-header>
    <ion-toolbar>
        <ion-title>Details</ion-title>
        <ion-buttons slot="start">
            <ion-button (click)="goBack()">
                <ion-icon slot="start" name="arrow-back"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content padding>

    <ion-card *ngIf="info != undefined">
        <ion-card-header>
            <ion-card-subtitle>{{ info.nimi }}</ion-card-subtitle>
            <ion-card-title>{{ info.osoite }}</ion-card-title>
        </ion-card-header>

        <ion-card-content>
            {{ info.postinumero }} {{ info.kunta }}
            <br>
      {{ info.aukioloajat }}
    </ion-card-content>
  </ion-card>

  <div id="map_canvas"></div>

</ion-content>

info.page.ts:

import { Component, OnInit } from '@angular/core';
import { LocationService } from '../location.service';
import { NavController, Platform } from '@ionic/angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';

@Component({
  selector: 'app-tiedot',
  templateUrl: './info.page.html',
  styleUrls: ['./info.page.scss'],
})
export class InfoPage implements OnInit {

  info: any;
  map: GoogleMap;

  constructor(public service: LocationService,
    public navCtrl: NavController,
    private platform: Platform) {
  }

  async ngOnInit() {
    this.map = this.service.getInfo();
    await this.platform.ready();
    await this.loadMap();
  }

  goBack() {
    this.navCtrl.back();
  }

  loadMap() {
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'AIzaSyDhNkv1hIlt92x02Glsg9u_7u9GSwcOV5U',
      'API_KEY_FOR_BROWSER_DEBUG': 'AIzaSyDhNkv1hIlt92x02Glsg9u_7u9GSwcOV5U'
    })

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    }

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'drop',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('klikattu');
    })
  }

}

}

作为旁注，您能否解释这些错误消息的含义：

GET http://192.168.43.43:8100/config.xml 404 (Not Found)

和

[Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found

Answer 1

我遇到了同样的问题。我刚刚向 div 添加了样式，效果非常好。

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

所有代码都是一样的。以上方法已测试。

谢谢！编码愉快！！

Answer 2

如果 div 有一个（或多个）维度为 0 像素，就会发生这种情况。在 Ionic 的选项卡模板中，它也发生在我身上。只需添加样式即可解决问题。还要确保您使用的是 ionic native google 地图插件的最新测试版。

参见：https://forum.ionicframework.com/t/ionic-4-google-maps-plugin/139786/2

Answer 3

请检查地图 div 和父元素是否有一定的高度。 CSS 始终将百分比值视为父元素的百分比。

这个问题很多时候是分配了0px的高度引起的。这样想，地图 div 在初始化时是空的，它（和父元素）的高度为 0px。后面我们填地图的东西的时候就什么也看不到了，因为父级0px的高度100%就是0px。您将看到错误：找不到元素 [#map_canvas].

例如，

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

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

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

祝你好运。

Answer 4

离子 4

如果你想访问模态组件中的Google地图使用这段代码

 GoogleMaps.create(document.getElementById('map_canvas'), mapOptions);

Error: Can not find the element [#map_canvas]

Error: Can not find the element [#map_canvas]

ionic-framework

angular

ionic4