代码之家 › 专栏 › 技术社区 › SteveB

谷歌地图在离子标签

ionic4 google-maps-api-3 javascript

SteveB · 技术社区 · 6 年前

我想让谷歌地图在普通的离子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之前呈现代码段。在map create函数的代码段中的google maps模块中抛出异常。

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

感谢您的帮助。

1 回复 | 直到 6 年前

Mankeomorakort 6 年前

要将本地谷歌地图视图嵌入到应用程序中,有两种解决方案:

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();
        });
    })
  }
}

注: 你不能打电话 这个.IITMAP() 在里面 nGunIn() 函数,因为HTML DOM不是以逗号呈现的。所以在离子4中,你需要打电话给它 IONVIEWDIDEenter()。 相反。有关更多信息,请阅读 Ionic 4 and the Lifecycle Hooks in Angular

截图

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