IONIC 3：未捕获（承诺）：ReferenceError：google未定义ReferenceError [英] IONIC 3: Uncaught (in promise): ReferenceError: google is not defined ReferenceError

问题描述

你好吗？我正在学习带有Ionic 3教程的Google Maps。我已经完成了所有解释，但是当项目启动时，出现这个错误。我已经调查了很多，但没有任何工作。

$ b $ pre $ 错误：Uncaught（在承诺中）：ReferenceError：google没有定义
ReferenceError：google不是定义


这是我的代码：

home.ts
$ b

 从'@ angular / core'导入{Component，ViewChild，ElementRef}; 
从'ionic-angular'导入{NavController}; 
从'ionic-angular'导入{IonicPage}; 
 
 declare var google; 
 $ b $ @ @onicPage（）
 @Component（{
 selector：'page-home'，
 templateUrl：'home.html'
}）
导出类主页{
 
 @ViewChild（'map'）mapElement：ElementRef; 
 map：any; 
 start ='chicago，il'; 
 end ='chicago，il'; 
 directionsService = new google.maps.DirectionsService; 
 directionsDisplay = new google.maps.DirectionsRenderer; 
 
构造函数（public navCtrl：NavController）{
 $ b $} 
 
 ionViewLoad（）{
 this.initMap（）; 
 
 
 initMap（）{
 this.map = new google.maps.Map（this.mapElement.nativeElement，
 {
 zoom：7 ，
 center：{lat：41.85，lng：-87.65} 
}）; 
 
 this.directionsDisplay.setMap（this.map）; 
 
 
 calculateAndDisplayRoute（）{
 this.directionsService.route（{
 origin：this.start，
 destination：this.end，
 travelMode：'DRIVING'，
}，（response，status）=> {
 if（status =='OK'）{
 this.directionsDisplay.setDirections（response）; 
} else {
 window.alert（'由于'+ 
状态'导致请求失败）; 
} 
}）; 
} 
 
} 
  

解决方案

您是否尝试过使用 setTimeout（ ）？

例如：

  ionViewLoad（）{
 setTimeout（（）=> {this.initMap（）;}，100）; 
} 
  

How are you?. I am studying a Google Maps with Ionic 3 tutorial. I have done everything what is explained there, but when the project is launched, there is appearing this error. I have investigated A LOT, but nothing works. Thanks!.

Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined

This is my code:

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';

declare var google;

@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

    @ViewChild('map') mapElement:ElementRef;
    map: any;
    start = 'chicago, il';
    end = 'chicago, il';
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;

    constructor(public navCtrl: NavController) {

    }

    ionViewLoad(){
        this.initMap();
    }

    initMap(){
        this.map = new google.maps.Map(this.mapElement.nativeElement, 
    { 
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
    });

        this.directionsDisplay.setMap(this.map);
    }

    calculateAndDisplayRoute(){
        this.directionsService.route({
            origin: this.start,
            destination: this.end,
            travelMode: 'DRIVING',
        }, (response, status) => {
            if(status == 'OK'){
                this.directionsDisplay.setDirections(response);
            }else{
                window.alert('Directions request failed due to ' + 
        status);
            }
        });
        }

     }

解决方案

Even if you declare google, you have to 'wait' for the device to be loaded.

Have you tried to use setTimeout() ?

E.g.:

ionViewLoad(){
    setTimeout(()=>{ this.initMap(); },100);
}

这篇关于IONIC 3：未捕获（承诺）：ReferenceError：google未定义ReferenceError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！