javascript - 在组件 [Angular] 中加载 Google Maps JS API

Question

如何从 Angular 组件中的 url 加载外部 js 文件？

具体来说，我正在尝试将 google-maps-api 加载到我的 Angular 项目中。目前，我在我的 index.html 中这样做:

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

注意:我知道 angular-maps。那不是一个选择。

Answer 1

您可以随时使用 Promise 异步加载 google API。

// map-loader.service.ts
import ...
declare var window: any;

@Injectable()
export class MapLoader {

    private static promise;
    map: google.maps.Map;

    public static load() {
        if (!MapLoader.promise) { // load once
            MapLoader.promise = new Promise((resolve) => {
                window['__onGapiLoaded'] = (ev) => {
                    console.log('gapi loaded')
                    resolve(window.gapi);
                }
                console.log('loading..')
                const node = document.createElement('script');
                node.src = 'https://maps.googleapis.com/maps/api/js?key=<YOUR _API_KEY>&callback=__onGapiLoaded';
                node.type = 'text/javascript';
                document.getElementsByTagName('head')[0].appendChild(node);
            });
        }

        return MapLoader.promise;
    }

    initMap(gmapElement, lat, lng) {

        return MapLoader.load().then((gapi) => {
            this.map = new google.maps.Map(gmapElement.nativeElement, {
                center: new google.maps.LatLng(lat, lng),
                zoom: 12
            });
        });
    }
}

组件

//maps.component.ts

...
@Component({
  selector: 'maps-page',
  templateUrl: './maps.component.html'
})
export class MapsComponent implements OnInit {       

  @ViewChild('gmap') gmapElement: any;
  constructor(public mapLoader: MapLoader) { }

  ngOnInit() {

      this.mapLoader.initMap(this.gmapElement, -37.81, 144.96)  // await until gapi load
  }

  ...
}

组件 HTML

// maps.component.html
<div #gmap ></div>

不要忘记向元素添加 CSS。