将googlemaps添加到angular-cli [英] adding googlemaps to angular-cli
问题描述
我正在尝试将googlemaps实现到我的angular-cli项目.我知道有一个"angular2-google-maps"组件(
I am trying to implement googlemaps to my angular-cli project. I know that there is a 'angular2-google-maps' component (github), but I need routes and more custom features.
我发现了将地图实现到项目中的两种方法:
I found two ways on implementing the map into an project:
1: stackoverflow :使用Google api loader-但我不知道如何初始化google-maps ...
1: stackoverflow: with a google api loader - but I couldn't figure out how to initialise google-maps...
2:使用DefinitelyTyped google.maps. d.ts . 我在项目中安装了--global(因为不赞成使用环境ist.)并将其安装到src/typings.d.ts中,并将index.d.ts(用于全局)添加到了src/typings.d.ts中,并且可以在.ts文件:
2: with an DefinitelyTyped google.maps.d.ts. I installed it with --global (since ambient ist deprecated..) into my project and added the index.d.ts (for global) to the src/typings.d.ts and can use "google.map.." in an .ts file:
myLatLng = {lat: -25.363, lng: 131.044};
map:any;
constructor() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: this.myLatLng,
zoom: 4
});
}
但是如果我使用angular-cli构建它,则会出现以下错误: "ReferenceError:未定义google"
but if I build it with angular-cli it errors: "ReferenceError: google is not defined"
有什么想法吗?
推荐答案
此处提供了将Google Maps组件添加到angular-cli项目的分步指南.
Here a step by step guide to add a google maps component to angular-cli project.
第一步:从DefinitelyTyped安装google.maps:
Step1 : install google.maps from DefinitelyTyped:
typings i dt~google.maps --global --save
第2步:如果您安装了较早的打字类型,请添加
Step2 : if you have an older typings installed add
/// <reference path="../typings/index.d.ts" />
到您的src/typings.d.ts
to your src/typings.d.ts
Step3:生成新组件
Step3 : generate new component
ng g component google-maps
将以下代码添加到:
.ts:
height = '100px';
myLatLng = {lat: -25.363, lng: 131.044};
map:any;
constructor(private googleApi:GoogleApiService) {}
ngOnInit() {
this.googleApi.initMap().then(() => {
let latlng = new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng);
this.map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 4
});
new google.maps.Marker({
position: latlng,
map: this.map,
title: 'Hello World!'
});
});
}
.html:
<div id="map" [style.height]="height"></div>
第四步:生成新服务
ng g service google-maps/shared/google-api
将GoogleApiService + HTTP_PROVIDERS添加到src/main.ts
Add GoogleApiService + HTTP_PROVIDERS to src/main.ts
代码:
const API_KEY = '[insert your code]';
const url = 'https://maps.googleapis.com/maps/api/js?key='+ API_KEY +'&callback=initMap';
@Injectable()
export class GoogleApiService {
private loadMap: Promise<any>;
constructor(private http:Http) {
this.loadMap = new Promise((resolve) => {
window['initMap'] = () => {
resolve();
};
this.loadScript()
});
}
public initMap():Promise<any> {
return this.loadMap;
}
private loadScript() {
let script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
if (document.body.contains(script)) {
return;
}
document.getElementsByTagName('head')[0].appendChild(script);
}
}
也许您需要从spec.ts文件中删除一些行. 但是随后您可以将GoogleMapsComponent添加为指令.
Maybe you need to delete some lines from the spec.ts files. But then you can add the GoogleMapsComponent as a directive.
- 通过路线等进行扩展非常容易. 也许我有时间将最新版本的GoogleMapsComponent上传到github..
- it is super easy to expand with routes etc. Maybe if I have time I upload a current version of my GoogleMapsComponent to github..
这篇关于将googlemaps添加到angular-cli的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!