将Google Maps api加载到angular2的最佳方法是什么? [英] What's the best way to load the google maps api into angular2?
问题描述
我玩过 angular2地图，但最后我想我想直接使用 google maps API.
I have played around with angular2 maps, but in the end I think I want to use the google maps api directly.
将其加载到角度2的最佳/正确方法是什么?目前，我是通过脚本标签加载它的，就像这样.该标签被插入到index.html文件中.
What's the best/right way to load this into angular 2? Currently I am loading it via a script tag, inserted into the index.html file, like so.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ourlatitude</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<body>
<script
src="https://maps.googleapis.com/maps/api/js?key=my_api_key">
</script>
<app-root>Loading...</app-root>
</body>
</html>
然后，我在将保存地图的组件的ngAfterViewInit()挂钩内的组件中创建地图.
Then I create a map in a component inside the ngAfterViewInit() hook of the component that will hold the map.
ngAfterViewInit() {
this.map = new google.maps.Map(this.mymap.nativeElement, {zoom: 4, center: {lat: -25.363, lng: 131.044} });
}
这似乎可行，但是添加script标记似乎不是正确的选择.我尝试将脚本添加到angular-cli.json脚本中:[]数组，但这似乎不起作用(对 new google.maps.Map()的调用失败，未定义google)
This seems to work, but adding the script tag does not seem like the right thing to do. I tried adding the script to the angular-cli.json scripts: [] array, but that does not seem to work (the call to new google.maps.Map() fails with google being undefined).
顺便说一句，我通过 npm install --save @ types/google-maps 安装了类型，它们似乎可以识别.
BTW, I installed the types via npm install --save @types/google-maps and they seem to be recognized.
推荐答案
这就是我集成google-maps的方式:
This is how I integrated google-maps:
-
我创建了脚本加载服务，该服务仅在以下情况下加载脚本必需-
I created script load service, which loads scripts only when required -
从'@ angular/core'导入{可注射};
import { Injectable } from '@angular/core';
@Injectable()
export class ScriptLoadService {
constructor() { }
public loadScript(url, id, c): void {
if (!document.getElementById(id)) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = id;
if (c) {
script.addEventListener('load', function (e) {
c(null, e);
}, false);
}
document.head.appendChild(script);
}
}
}
在您的环境文件中添加googleMapURL
Add your googleMapURL in your environment file
googleMapURL:'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX&libraries=places'
googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX&libraries=places'
-
现在您可以通过注入来在任何组件中使用Use google maps apiScriptLoadService并在ngOnInit或ngAfterViewInit中调用loadScript功能:
Now you can use use google maps api in any component by injecting ScriptLoadService and in ngOnInit or ngAfterViewInit call loadScript funcion:
@ViewChild('mapElement')mapElm:ElementRef;//显示地图
@ViewChild('mapElement') mapElm: ElementRef; // to display map
constructor( private scriptLoadService: ScriptLoadService ) {} // inject the service
ngAfterViewInit() {
this.scriptLoadService.loadScript(environment.googleMapURL, 'google-map', () => {
this.center = new google.maps.LatLng(
this.lat,
this.lng);
// Create map
this.map = new google.maps.Map(this.mapElm.nativeElement, {
zoom: 18,
center: this.center,
disableDefaultUI: true,
scrollwheel: false,
});
// Add Marker to current location detected by browser
this.marker = new google.maps.Marker({
position: this.center,
map: this.map
});
});
}
希望这会有所帮助:)
这篇关于将Google Maps api加载到angular2的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
