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的标签模板中。只需添加样式即可解决问题。另外，请确保您使用的是离子本机Google地图插件的最新Beta版。

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

Answer 3

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

通常此问题是由分配0px高度引起的。以这种方式考虑，map 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>

确保map div和父元素（即上例中的离子卡）在初始时具有一定高度。您可以设置一个固定的测试高度，这将证明我的观点。

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

祝你好运。

Answer 4

离子4

如果您想在Modal Component中访问Google Map，请使用这段代码

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

错误：找不到元素[#map_canvas]

4 个答案: