我最近开始使用ng2。所以我使用 angular-cli 创建了一个项目，然后我意识到我需要一些第三方模块。比如谷歌地图api、lodash、jquery...等。我知道 Typescript 的基础知识，但我如何在 Angular2 应用程序中使用这些模块？另外，我只想使用库，例如谷歌地图api，而不是其他人在谷歌地图API之上制作的任何现有的ng2模块/组件 - 为了学习。
以前，仅使用 JS，我会包含 js 文件并引用 api 文档以了解引用和构建我的应用程序的方法。现在有了 Angular2，我应该采取哪些步骤来做同样的事情？
根据我的研究，看起来我首先安装了所需的类型脚本文件。 所以对于谷歌地图，我做了npm install --save @types/google-maps. 现在，我是否需要通过将这个模块包含在 app.module.ts 中来将此模块导入我的角度应用程序？在导入数组中？还是现在全球可用？
一个来源提到使用 npm 和我的 angular-cli.json 安装它，包括在脚本数组中对该库的引用。 像这样：
"scripts": ['./node_modules/googlemaps/googemaps.min.js'],
安装谷歌地图API使用哪种方法？我认为Typescript可能是要走的路，因为Angular应用程序的其余部分将用Typescript编写。
现在在我的app.component.ts中，我想使用我安装的打字稿创建一个简单的映射。我该怎么做？谷歌地图 API 说要像这样创建一个新的地图实例。
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
我将如何使用我刚刚安装的Google地图的打字稿版本来做到这一点？
Googlemaps的打字稿版本是否具有与原始API相同的方法？流行的JS库的打字稿是否有我可以参考的文档站点？
@Steve G. 指出的 agm 项目提供了一个很好的起点，但出于某种原因(例如管理您自己的请求策略)，您可能希望制作自己的类型化包装器。 这是我如何使用 Angular CLI 做到的：
第一步 ：
npm i --save @types/googlemaps
其次，将类型添加到您的tsconfig.app.json：
"types": ["googlemaps"]
最后写下你的打字稿：
//nothing to import here
//Replace this by anything without an ID_KEY
const getScriptSrc = (callbackName) => {
return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`;
}
export class GMapService {
private map: google.maps.Map;
private geocoder: google.maps.Geocoder;
private scriptLoadingPromise: Promise<void>;
constructor() {
//Loading script
this.loadScriptLoadingPromise();
//Loading other components
this.onReady().then(() => {
this.geocoder = new google.maps.Geocoder();
});
}
onReady(): Promise<void> {
return this.scriptLoadingPromise;
}
initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> {
return this.onReady().then(() => {
return this.map = new google.maps.Map(mapHtmlElement, options);
});
}
private loadScriptLoadingPromise() {
const script = window.document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.defer = true;
const callbackName: string = 'UNIQUE_NAME_HERE';
script.src = getScriptSrc(callbackName);
this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
(<any>window)[callbackName] = () => { resolve(); };
script.onerror = (error: Event) => { reject(error); };
});
window.document.body.appendChild(script);
}
/** Exemple of wrapped to promise API */
geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> {
return this.onReady().then(() => {
this.geocoder.geocode(typeof address == "google.maps.GeocoderRequest" ? address: {address: address},
(results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
if(status == google.maps.GeocoderStatus.OK) {
return results;
} else {
throw new Error(status.toString());
}
});
});
});
}
所以你的地图组件将看起来像这样：
@Component({
selector: 'app-gmap-wrapper',
template: '<div #map style="width:400px; height:300px">loading...</div>'
})
export class GMapWrapperComponent implements OnInit {
@ViewChild('map') mapRef: ElementRef;
constructor(private gmapService: GMapService) { }
ngOnInit() {
this.gmapService.initMap(this.mapRef.nativeElement, {
center: {lat: 1234.1234, lng: 1234.1234},
scrollwheel: true,
zoom: 8
});
}
}
如果没有所有类型的前缀中google.maps命名空间，此代码应该更好。也许有什么建议？
我在组合中使用 AGM 时也遇到了麻烦，然后我尝试了 nu-maps，在那里我也遇到了麻烦。
所以我使用了普通的谷歌 api javascript，我认为它更好： https://cloud.google.com/maps-platform/?hl=de
- 简单
- 有据可查
- 不依赖于一些不合并拉取请求的人
- 它有效！