Google Ionic 选项卡中的地图

Question

我正在尝试让 Google 地图在香草 Ionic 4 选项卡下工作。这是我得到的错误。

Error: Element must be under <body>
at Function.push../node_modules/@ionic-native/google-maps/ngx/index.js.GoogleMaps.create (index.js:208)
at Tab1Page.push../src/app/tab1/tab1.page.ts.Tab1Page.initMap (tab1.page.ts:24)

这是选项卡 HTML。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Find A Store
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div #map id="map_canvas" style="height:100%;"></div>
</ion-content>

这是标签打字稿。

import { Component, ViewChild, OnInit } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker } from "@ionic-native/google-maps/ngx";

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

  @ViewChild('map') element;

  constructor(public googleMaps: GoogleMaps, public platform: Platform,
    public nav: NavController) {}

    async ngOnInit() {
      await this.platform.ready();
      await this.initMap()
    }

    initMap() {

      let map: GoogleMap = GoogleMaps.create(this.element.nativeElement);

      map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
        let position = {
          target: coordinates,
          zoom: 17
        };
        map.animateCamera(position);

        let markerOptions: MarkerOptions = {
          position: coordinates,
          icon: "../../assets/images/icons8-Marker-64.png",
          title: 'Greensboro, NC'
        };
        const marker = map.addMarker(markerOptions)
          .then((marker: Marker) => {
            marker.showInfoWindow();
        });
      })
    }
}

由于 HTML 代码段应该已经在 body 标签下，我不确定这会如何发生，除非代码段在生成 body 之前呈现。在地图创建函数的这段代码中的 Google 地图模块中抛出了异常。

if (element instanceof HTMLElement) {
    if (!element.offsetParent) {
        throw new Error('Element must be under <body>');
    }

感谢任何帮助。

Answer 1

要将原生 Google 地图视图嵌入到您的应用中，有 2 种解决方案：

1- 使用元素 DIV ID：

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker } from "@ionic-native/google-maps/ngx";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
  map: GoogleMap;

  constructor(public googleMaps: GoogleMaps, public platform: Platform,
    public nav: NavController) { }

  async ngOnInit() {
    await this.platform.ready();
    await this.initMap();
  }

  initMap() {
    this.map = GoogleMaps.create("map_canvas");

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates,
        //icon: "../../assets/images/icons8-Marker-64.png",
        title: 'Greensboro, NC'
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }
}

2- 使用@ViewChild:

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker } from "@ionic-native/google-maps/ngx";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  @ViewChild('map') element: ElementRef;
  map: GoogleMap;

  constructor(public googleMaps: GoogleMaps, public platform: Platform,
    public nav: NavController) { }

  ionViewDidEnter() {
    console.log("call ionViewDidLoad");
    this.platform.ready().then(() => {
      this.initMap();
    });
  }


  initMap() {
    this.map = GoogleMaps.create(this.element.nativeElement);

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates,
        //icon: "../../assets/images/icons8-Marker-64.png",
        title: 'Greensboro, NC'
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }
}

注意：你不能在ngOnInit()[=36=中调用this.initMap() ] 函数，因为 HTML DOM 没有完全呈现。所以在 Ionic 4 中，你需要在 ionViewDidEnter() 中调用它。更多信息，请阅读Ionic 4 and the Lifecycle Hooks in Angular

截图

你可以在这里找到我的源代码：ionic4-tabs-map

Google Ionic 选项卡中的地图

Google Maps In Ionic Tab

javascript

google-maps-api-3

ionic4