Google maps 如何将Google Maps API集成到Angular 2组件中_Google Maps_Angular_Angular2 Template

Google maps 如何将Google Maps API集成到Angular 2组件中

google-maps angular

Google maps 如何将Google Maps API集成到Angular 2组件中,google-maps,angular,angular2-template,Google Maps,Angular,Angular2 Template,我在comp.ts文件中定义了一个角度2分量，如下所示： import {Component} from 'angular2/core'; @component({ selector:'my-comp', templateUrl:'comp.html' }) export class MyComp{ constructor(){ } } <body> <div id="googleMap" style="width:500px;he

我在comp.ts文件中定义了一个角度2分量，如下所示：

import {Component} from 'angular2/core';

@component({
    selector:'my-comp',
    templateUrl:'comp.html'
})

export class MyComp{
    constructor(){
    }
}

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
</body>

因为我希望组件显示google地图，所以我在comp.html文件中插入了以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>


函数初始化（）{
var mapProp={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

此代码已从此链接复制。问题是组件没有显示地图。我做错了什么？我找到了解决办法。首先，以下几行：

<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

最后，id为“googleMap”的div（将包含google地图）必须插入comp.html文件中，如下所示：

import {Component} from 'angular2/core';

@component({
    selector:'my-comp',
    templateUrl:'comp.html'
})

export class MyComp{
    constructor(){
    }
}

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
</body>

是的，你可以这么做。但typescript编译器中会出现错误，所以不要忘记隐式声明google变量

declare var google: any;

在组件导入后立即添加此指令

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    var mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
  }
}

使用angular2谷歌地图：

从'@angular/platform browser'导入{BrowserModule}；
从'@angular/core'导入{NgModule，ApplicationRef}；
从“angular2 google maps/core”导入{AgmCoreModule}；
@组成部分({
选择器：'应用程序根'，
风格：[`
.sebm谷歌地图容器{
高度：300px；
}
`],
模板：`
`
})
导出类AppComponent{
lat：数字=51.678418；
液化天然气：数量=7.809007；
}
@NGD模块({
进口：[
浏览器模块，
AgmCoreModule.forRoot({
apiKey:“你的谷歌地图API密钥”
})
],
声明：[AppComponent]，
引导：[AppComponent]
})
导出类AppModule{}

ngOnInit帮助我解决了getElementById问题，谢谢！在谷歌的var声明中，我建议使用[gmaps typings]（），这真的很有帮助well@youssef我得到的

谷歌没有在console@Arbaaz我猜google maps JS没有正确导入到你的应用程序中，你能提供你的应用程序的要点/简单代码吗？你应该把你想要地图显示的元素放入你组件的html模板中。我只是想澄清一下。模板中通常没有主体标记。这种解决方案也适用于Angular 5.x。回答得很好，谢谢！如果在该版本中使用此选项，您可能需要npm安装@types/googlemaps--save
@tkhm我正在获取google未在控制台中定义
导入类型吗？换句话说，您是否在ts文件中添加了来自@types/googlemaps

的

import{}？