如何使用 webpack 在 Angular 2 中使用 gmaps.js？答案

【问题标题】：How can i consume gmaps.js in Angular 2 using webpack?如何使用 webpack 在 Angular 2 中使用 gmaps.js？
【发布时间】：2016-05-13 10:55:28
【问题描述】：

我想在 Angular 2 应用程序中使用 gmaps.js 外部库。我正在使用 Webpack 来加载我的模块。

谁能帮帮我？

提前谢谢你...

【问题讨论】：

标签： google-maps angular webpack gmaps.js

【解决方案1】：

已经为此构建了一个库：angular2-google-maps

https://angular-maps.com/

我目前也在研究这个问题，因为目前它似乎不是一个完整的开箱即用解决方案，因为它缺少几个功能并且有几个相关问题，正如您从项目 github 打开问题页面。

但它确实有效，如果您正在寻找易于使用的组件来实现应用程序的小部分功能，它可能是您的理想之选。

配合 webpack 使用并不难：

-通过 npm 安装 ng2 谷歌地图

npm install angular2-google-maps --save

-导入需要的元素

/**
 * ng2 Google maps
 */
import {
 MapsAPILoader,
 NoOpMapsAPILoader,
 MouseEvent,
 GOOGLE_MAPS_DIRECTIVES,
 GOOGLE_MAPS_PROVIDERS
} from 'angular2-google-maps/core';

-并在您的组件中使用它们：如果您查看 app/main.ts，入门 plunker 也应该与 webpack 一起使用（我不会在这里发布它，因为代码不是我的)

http://plnkr.co/edit/YX7W20?p=preview

【讨论】：