angular - 如何在 Angular 4 中实现 Google Maps API (initMap)？

Question

我尝试在 Angular 中集成 Google map 。

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
            });
        }
    }

我仍然得到错误“initMap 不是一个函数”。

Answer 1

它中断是因为当 Google 的脚本试图调用它时 initMap 函数不可用。它也不像 Google 的脚本所期望的那样在全局范围内可用(它的范围仅限于该类)。

有一个名为 Angular Google Maps 的现有库其目的是将 Google map 与 Angular 应用程序结合使用。