google-maps - 如何在 Angular2 中异步加载 google maps api

Question

通常在普通的 javascript 站点中，我可以使用以下脚本来引用 google maps api 并使用 initMap 设置 callback 函数。

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

我观察到的是普通javascript站点中的initMap函数在window作用域下，可以在脚本参数设置中引用-?callback=initMap ，但是一旦我使用名为 initMap 的组件方法在 angular2 中编写组件，initMap 将在我的组件范围内。然后我在索引中设置的异步加载脚本将无法捕获我的组件 initMap 方法。

具体来说，我想知道如何在 Angular2 中实现同样的事情？

PS: I know there is an angular2-google-maps component available in alpha via npm, but it currently is shipped with limited capability, so I 'd like to know how to load it in an easier way without using another component so I can just use google maps api to implement my project.

Answer 1

我知道您不想要其他组件，但 polymer 具有可与 google api 很好地配合使用的组件。我有使用聚合物 youtube 数据 api 的 angular2 代码。我帮忙设置了它。这是 plunker这让我开始了。我认为困难的部分是为该回调进行设置，我相信您可以在没有聚合物的情况下做到这一点。该示例显示了 Angular 服务用于连接所有内容的棘手部分。

    const url = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded'

    export class GoogleAPI {
      loadAPI: Promise<any>
      constructor(){
        this.loadAPI = new Promise((resolve) => {
          window['__onGoogleLoaded'] = (ev) => {
            console.log('gapi loaded')
            resolve(window.gapi);
          }
          this.loadScript()
        });
        
      }
      
      doSomethingGoogley(){
        return this.loadAPI.then((gapi) => {
          console.log(gapi);
        });
      }
      
      loadScript(){
        console.log('loading..')
        let node = document.createElement('script');
        node.src = url;
        node.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(node);
        
      }
    }