Я работаю над проектом Ionic 3 и функциональностью, связанной с картой, я выбрал плагин Google Maps, предложенный Ionic Team. Плагин Google Maps Ionic в основном представляет собой оболочку с плагинами corova-plugin-googlemaps. Я выполнил шаги, упомянутые в этой презентации.
Я не могу показать карту в элементе с id map_canvas
, который помещается в один из html-страниц. Вот что я пробовал до сих пор:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GoogleMaps, GoogleMap, Marker } from '@ionic-native/google-maps';
@IonicPage()
@Component({
selector: 'page-step-two',
templateUrl: 'step-two.html',
})
export class StepTwoPage {
private stepTwoForm: FormGroup;
private map: GoogleMap;
constructor(private formBuilder: FormBuilder) {
this.stepTwoForm = this.formBuilder.group({
prename: ['', Validators.required],
name: ['', Validators.required],
email: ['', Validators.required],
mobile: ['', Validators.required],
yearLiving: ['', Validators.required],
});
}
ionViewDidLoad() {
// Create a map after the view is ready
// and the native platform is ready.
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas'); // <--- Problematic statement
}
goToStepThree() {
}
}
И вот страница html:
<ion-header>
<ion-navbar>
<ion-title>Step - 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<progress-bar [stepCount]="5" [currentStep]="2"></progress-bar>
<ion-card class="step-body-card">
<ion-card-header>
<h1 text-center class="card-title">Persona</h1>
</ion-card-header>
<ion-card-content>
<form [formGroup]="stepTwoForm" (ngSubmit)="goToStepThree()">
<ion-grid>
<ion-row>
<ion-col col-12 col-sm>
<ion-item>
<ion-input type="text" placeholder="Prename" formControlName="prename"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12 col-sm>
<ion-item>
<ion-input type="text" placeholder="Name" formControlName="name"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-sm>
<ion-item>
<ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12 col-sm>
<ion-item>
<ion-input type="tel" placeholder="Mobile" formControlName="mobile"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-sm>
<ion-item>
<ion-input type="number" min="0" placeholder="Year of living" formControlName="yearLiving"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12 col-sm>
</ion-col>
</ion-row>
</ion-grid>
<button margin-top ion-button type="submit" [disabled]="!stepTwoForm.valid">Continue</button>
</form>
</ion-card-content>
</ion-card>
</ion-content>
Я попробовал работать в Android, и он дает ошибку, без каких-либо показов на элементе map_canvas
. Ошибка вызвана кордовой:
Error in Success callbackId: CordovaGoogleMaps1188158820 : ReferenceError: element is not defined
А вот трассировка стека с консоли:
Uncaught ReferenceError: element is not defined
at Map.<anonymous> (:8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:645)
at Map.trigger (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:68)
at Map.set (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:35)
at Map.getMap (:8100/plugins/cordova-plugin-googlemaps/www/Map.js:152)
at :8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:881
at Object.callbackFromNative (cordova.js:291)
at <anonymous>:1:9
Я могу подтвердить, что эта ошибка выдается оператором во время инициализации или создания карты, которая указана как постановка проблемы в page.ts. Я не могу получить основную проблему для этой ошибки.
Пожалуйста, помогите мне устранить проблему и предложить исправление.
РЕДАКТИРОВАТЬ
После отладки я обнаружил, что ошибка возникает только в том случае, если элемент map_canvas
(div) находится внутри form
, если я map_canvas
его из тега form
, он работает так, как ожидалось, и отображает карту.
Возможно, это ошибка, или что-то не так с FormBuilder
. Мне нужно показать карту Google в форме, поэтому, пожалуйста, помогите мне исправить это странное поведение плагина Google Map. Отредактированный вопрос, который включает полную форму для справки и упрощенную логику создания карты.
Обновить
После создания общего проекта я не могу воспроизвести ошибку
Проблема исчезла, по крайней мере, v2.3.8
create
принимает обе формы, HTMLElement
или строку идентификатора элемента. Я пытался с вашим предложением, но не повезло. Кстати, это должен быть комментарий, а не ответ.