javascript - ReferenceError：元素未定义-cordova-plugin-googlemaps

问题描述

我正在开发一个 Ionic 3 项目，对于地图相关功能，我选择了 Ionic Team 建议的Google Maps插件。Google Maps Ionic 插件基本上是围绕cordova-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元素上显示任何内容。该错误是由cordova产生的：

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）在.formform

也许这是一个错误或有什么问题FormBuilder。我需要在表单中显示谷歌地图，所以请帮我解决谷歌地图插件的这种奇怪行为。已编辑的问题，包括现在供参考的完整表格和简化的地图创建逻辑。

标签： javascriptangularionic-frameworkgoogle-maps-api-3cordova-plugins

javascript - ReferenceError：元素未定义-cordova-plugin-googlemaps

问题描述

解决方案

推荐阅读