gpt4 book ai didi

javascript - 引用错误 : element is not defined - cordova-plugin-googlemaps

转载 作者:行者123 更新时间:2023-11-30 20:21:47 30 4
gpt4 key购买 nike

我正在做一个 Ionic 3 项目,对于 map 相关的功能,我选择了 Google Maps Ionic Team 推荐的插件。 Google Maps Ionic 插件基本上是 cordova-plugin-googlemaps 的包装器.我已按照此 presentation 中提到的步骤进行操作.

我无法在 ID 为 map_canvas 的元素中显示 map ,该元素位于页面 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

我可以确认这个错误是由初始化或创建 map 时的语句产生的,在 page.ts 中被指出为有问题的语句。我无法找到此错误的根本问题。

请帮助我解决问题并提出修复建议。

编辑
调试后我发现只有 map_canvas 元素 (div) 在 form 内时才会出现错误,如果我将它从 form 中取出> 标签,它按预期工作并显示 map 。

可能这是一个错误或 FormBuilder 有问题。我需要在表单中显示谷歌地图,所以请帮我解决谷歌地图插件的这种奇怪行为。编辑过的问题现在包括完整的引用表格和简化的 map 创建逻辑。

最佳答案

更新

构建共享项目后,我无法重现错误 enter image description here

问题至少v2.3.8已经没有了

关于javascript - 引用错误 : element is not defined - cordova-plugin-googlemaps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51378411/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com