为什么我无法在角度2组件中加载谷歌地图？ [英] Why can't I load google maps in angular 2 component?

问题描述

以下是我的ts组件：
$ b

 从'@ angular / core'导入{Component，OnInit，Output，EventEmitter} ; 
 
 declare var google：any; 
 $ b @Component（{
选择器：'app-root'，
 templateUrl：'./app.component.html'，
 styleUrls：['./ app.component.css']，
}）
 
 
导出类AppComponent实现OnInit {
 title ='Dashboard'; 
私人地图：任何; 
 
 
构造函数（）{
 let brussels = new google.maps.LatLng（50.82，4.35）; 
 var mapOptions = {
 zoom：9，
 center：brussels 
}; 
 this.map = new google.maps.Map（document.getElementById（'googleMap'），mapOptions）; 
 
 var marker = new google.maps.Marker（{
 position：brussels 
}）; 
 //google.maps.event.addListener（marker，'click'，（（）=> this.select.next（我是地图点击）））
 marker.setMap（ this.map）; 
 
 
 $ b $ ngOnInit（）{
 
} 
  

这是我的html：

 < h1> 
 {{title}} 
< / h1> 
< div id =googleMap>< / div> 
< div id =legend-container>< h3>图例< / h3>< / div> 
< div id =info-boxstyle =>？< / div> 
  

我在主index.html中声明了google maps的api键。问题是我似乎无法将谷歌地图加载到组件中。在控制台中的错误主要有以下几种：

  error_handler.js：45 EXCEPTION：./AppComponent类中的错误AppComponent_Host  -  inline模板：0：0造成的：google未定义错误处理器.handleError @ error_handler.js：45（匿名函数）@ application_ref.js：209ZoneDelegate.invoke @ zone.js：192onInvoke @ ng_zone_impl.js：43ZoneDelegate.invoke @ zone.js ：191Zone.run @ zone.js：85（匿名函数）@ zone.js：451ZoneDelegate.invokeTask @ zone.js：225onInvokeTask @ ng_zone_impl.js：34ZoneDelegate.invokeTask @ zone.js：224Zone.runTask @ zone.js：125drainMicroTaskQueue @ zone.js：357 
 error_handler.js：47 ORIGINAL EXCEPTION：google is not definedErrorHandler.handleError @ error_handler.js：47（anonymous function）@ application_ref.js：209ZoneDelegate.invoke @ zone.js：192onInvoke @ ng_zone_impl .js：43ZoneDelegate.invoke @ zone.js：191Zone.run @ zone.js：85（anonymous function）@ zone.js：451ZoneDelegate.invokeTask @ zone.js：225onInvokeTask @ ng_zone_impl.js：34Z oneDelegate.invokeTask @ zone.js：224Zone.runTask @ zone.js：125drainMicroTaskQueue @ zone.js：357 
 error_handler.js：50 ORIGINAL STACKTRACE：ErrorHandler.handleError @ error_handler.js：50（anonymous function）@ application_ref .js：209ZoneDelegate.invoke @ zone.js：192onInvoke @ ng_zone_impl.js：43ZoneDelegate.invoke @ zone.js：191Zone.run @ zone.js：85（匿名函数）@ zone.js：451ZoneDelegate.invokeTask @ zone.js ：225onInvokeTask @ ng_zone_impl.js：34ZoneDelegate.invokeTask @ zone.js：224Zone.runTask @ zone.js：125drainMicroTaskQueue @ zone.js：357 
 error_handler.js：51 ReferenceError：google未定义
  

任何建议都非常感谢：） / div>

谷歌地图API尚未加载，但您应该异步加载，并在加载后初始化地图。看看这个问题，关于异步加载谷歌地图。

正如@GünterZöchbauer说的，你应该在视图初始化后初始化地图。 （ ngAfterViewInit ）

类似于：

  export class AppComponent implements AfterViewInit {
 title ='Dashboard'; 
私人地图：任何; 
 
构造函数（）{
} 
 onMapsReady（）{
 let brussels = new google.maps.LatLng（50.82，4.35）; 
 var mapOptions = {
 zoom：9，
 center：brussels 
}; 
 this.map = new google.maps.Map（document.getElementById（'googleMap'），mapOptions）; 
 var marker = new google.maps.Marker（{
 position：brussels 
}）; 
 //google.maps.event.addListener（marker，'click'，（（）=> this.select.next（我是地图点击）））
 marker.setMap（ this.map）; 
} 
 ngAfterViewInit（）{
（<任何>窗口）.googleMapsReady = this.onMapsReady.bind（this）; 
 var script = document.createElement（script）; 
 script.type =text / javascript; 
 document.getElementsByTagName（head）[0] .appendChild（script）; 
 script.src =http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsReady; 
 
 
 
 $ b  

NB ：通过服务加载API将会（更好）

Here is my ts component:

import {Component, OnInit,  Output, EventEmitter} from '@angular/core';

    declare var google: any;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })


    export class AppComponent implements OnInit {
      title = 'Dashboard';
      private map: any;


        constructor() {
          let brussels = new google.maps.LatLng(50.82, 4.35);
          var mapOptions = {
            zoom: 9,
            center: brussels
          };
          this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

          var marker = new google.maps.Marker({
            position: brussels
          });
          //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
          marker.setMap(this.map);

        }

      ngOnInit(){

      }

Here is my html:

<h1>
  {{title}}
</h1>
<div id="googleMap"></div>
<div id="legend-container"><h3>Legend</h3></div>
<div id="info-box" style="">?</div>

I declared in the main index.html the api key for google maps. The problem is that I cannot seem to load the google map into the component. There errors in the console are mainly the following:

error_handler.js:45 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: google is not definedErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:47 ORIGINAL EXCEPTION: google is not definedErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:51 ReferenceError: google is not defined

Any suggestion is highly appreciated :)

解决方案

the google maps API is not loaded yet you should load it asynchronously an initialize the map after it has been loaded. take a look at this question about loading google maps asynchronously.

And as @Günter Zöchbauer said you should initialize the map after the view has been initialized. (in ngAfterViewInit)

something like this:

export class AppComponent implements AfterViewInit {
  title = 'Dashboard';
  private map: any;

  constructor() {
  }
  onMapsReady(){
    let brussels = new google.maps.LatLng(50.82, 4.35);
    var mapOptions = {
      zoom: 9,
      center: brussels
    };
    this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    var marker = new google.maps.Marker({
      position: brussels
    });
    //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
    marker.setMap(this.map);
  }
  ngAfterViewInit(){
    (<any>window).googleMapsReady=this.onMapsReady.bind(this);
     var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = "http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsReady";

  }

}

NB: loading the API via a service would be (much) better

这篇关于为什么我无法在角度2组件中加载谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！