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

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

我仍然得到错误"initMap不是一个函数".

Answer 1

它会崩溃，因为initMap当 Google 的脚本尝试调用该函数时，该函数不可用。它也不像 Google 脚本所期望的那样在全球范围内可用（它的范围仅限于该类）。

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