将 googlemaps 添加到 angular-cli
adding googlemaps to angular-cli
我正在尝试为我的 angular-cli 项目实施 googlemaps。我知道有一个 'angular2-google-maps' 组件 (github),但我需要路由和更多自定义功能。
我发现了两种将地图实施到项目中的方法:
1: : 使用 google api 加载器 - 但我不知道如何初始化 google-maps...
2:带有 DefinitelyTyped google.maps.d.ts。
我将它与 --global (因为不推荐使用 ambient ist..)一起安装到我的项目中,并将 index.d.ts (对于全局)添加到 src/typings.d.ts 并且可以使用 "google.map.." 在 .ts 文件中:
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 is not defined"
有什么想法吗?
这里是一步一步的指南,将 google 地图组件添加到 angular-cli 项目。
第 1 步:从 DefinitelyTyped 安装 google.maps:
typings i dt~google.maps --global --save
第 2 步:如果您安装了较旧的类型,请添加
/// <reference path="../typings/index.d.ts" />
给你的src/typings.d.ts
第 3 步:生成新组件
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
代码:
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 添加为指令。
- 使用路由等进行扩展非常容易。
也许如果我有时间,我会将我的 GoogleMapsComponent 的当前版本上传到 github..
我正在尝试为我的 angular-cli 项目实施 googlemaps。我知道有一个 'angular2-google-maps' 组件 (github),但我需要路由和更多自定义功能。
我发现了两种将地图实施到项目中的方法:
1:
2:带有 DefinitelyTyped google.maps.d.ts。 我将它与 --global (因为不推荐使用 ambient ist..)一起安装到我的项目中,并将 index.d.ts (对于全局)添加到 src/typings.d.ts 并且可以使用 "google.map.." 在 .ts 文件中:
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 is not defined"
有什么想法吗?
这里是一步一步的指南,将 google 地图组件添加到 angular-cli 项目。
第 1 步:从 DefinitelyTyped 安装 google.maps:
typings i dt~google.maps --global --save
第 2 步:如果您安装了较旧的类型,请添加
/// <reference path="../typings/index.d.ts" />
给你的src/typings.d.ts
第 3 步:生成新组件
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
代码:
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 添加为指令。
- 使用路由等进行扩展非常容易。 也许如果我有时间,我会将我的 GoogleMapsComponent 的当前版本上传到 github..