有谁知道如何将谷歌地图添加到 Angular 2 应用程序？

Question

有谁知道如何将谷歌地图添加到 Angular 2 应用程序中？

我目前在我的 index.html 页面中链接到它，如下所示：

   <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>

但是在我的 Angular 2 组件中使用它时出现此控制台错误：

system.src.js:1061 GET http://localhost:3000/angular2-google-maps/core 404（未找到）

这是我的控制台的屏幕截图：

系统配置：

System.config({
  packages: {      
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-google-maps': { defaultExtension: 'js' }
  }
});
System.import('app/boot')
      .then(null, console.error.bind(console));

Answer 1

经过长时间的研究，我找到了以下解决方案，

一旦我们安装了 Angular2-google-maps，我们就忘记在我们的配置中映射 js 文件了。

打开你的 systemjs.config.js

并在您的地图目录中添加'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js'。

我的代码：

map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
     'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js'
    },

它可能对某人有所帮助。 谢谢！。

Answer 2

我认为您忘记将其添加到您的 system.js 配置中：

  var packages = {
    ...
    'angular2-google-maps':       { defaultExtension: 'js' } <== this line
  };

另见http://angular-maps.com/docs/getting-started.html#angular2-google-maps-setup（部分更新systemjs.config.js）

它仅适用于 angular2^rc.X