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

Question

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

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

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

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

system.src.js：1061获取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 config：

  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