Question

我尝试在Angular中集成Google地图。

的index.html

<script async defer src="https://maps.googleapis.com/maps/api/js?key=api_key&callback=initMap"></script>

example.component.html

...
<div id="map"></div>
...

example.component.ts

...
ngAfterViewInit() {
        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    }

我仍然遇到错误＆＃34; initMap不是函数＆＃34;。

Answer 1

当Google的脚本尝试调用initMap函数时，它会中断。它也不是全球可用的，因为谷歌的脚本预计（它的范围是该类）。

有一个名为Angular Google Maps的现有库，其目的是使用带有Angular应用程序的Google地图。

Answer 2

在寻找其他解决方案之后，我最终使用了Angular Google Maps npm模块

使用这些步骤可以帮助我入门-https://angular-maps.com/guides/getting-started/-地图显示完美。

步骤：

npm install @agm/core

在app.module.ts中添加以下内容：

import { AgmCoreModule } from '@agm/core'

//on imports section
AgmCoreModule.forRoot({
  apiKey: 'YOUR_Maps_JavaScript_API_KEY_HERE'
})

在您要显示地图的组件（.ts）中执行以下操作：

lat : number;
lng : number;

ngOnInit() {
    this.prepareMap() ;
}

prepareMap() {
    this.lat = 51.678418;
    this.lng = 7.809007;

    console.log("prepareDivMap finished");
}

在相应的.css文件中添加以下内容：

agm-map {
    height: 300px;
}

在相应的html部分中添加以下内容：

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

这是使用agm将Google地图嵌入到角度组件中的结果

如何在Angular 4中实现Google Maps API（initMap）？

2 个答案: