angular - 有谁知道如何将谷歌地图添加到 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

并在 map 目录中添加 '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'
    },

这可能对某人有帮助。谢谢!.