Карты Google в вкладке Ionic - PullRequest
Новая
       5

Карты Google в вкладке Ionic

0 голосов
/ 12 февраля 2019

Я пытаюсь заставить 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, я не уверен, как это произойдет, за исключением, может быть, того, что фрагмент отображается перед созданием тела.Исключение выдается в модуле карт Google в этом фрагменте кода в функции создания карты. 

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

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 12 февраля 2019

Чтобы встроить собственные виды Google Maps в ваше приложение, существует 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();
        });
    })
  }
}

Примечание: Вы не можете вызвать this.initMap () в функции ngOnInit () потому что HTML DOM не отображается полностью.Поэтому в Ionic 4 вам нужно вызывать его в ionViewDidEnter () .Для получения дополнительной информации, пожалуйста, прочитайте Ionic 4 и крюки жизненного цикла в угловом

Снимок экрана

enter image description here

Вы можете найти мой исходный код здесь: ionic4-tabs-map

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...