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

通常在一个普通的javascript站点中，我可以使用以下脚本引用google maps api，并使用

initMap

设置

callback

函数

我观察到的是，普通javascript站点中的

initMap

函数在窗口范围内，它可以在脚本参数设置中引用-

？callback=initMap

，但一旦我使用名为

initMap

的组件方法在angular2中编写了一个组件，

initMap

将在我的组件范围内。然后，我在索引中设置的异步加载脚本将无法捕获我的组件

initMap

方法

具体来说，我想知道如何在

Angular2

中实现同样的目标？ PS：我知道有一个

angular2 google maps

组件可以通过

npm

在

alpha

中使用，但它目前的功能有限，所以我想知道如何在不使用其他组件的情况下更轻松地加载它，这样我就可以使用google maps api来实现我的项目

---

我知道你不需要其他组件，但polymer的组件可以很好地与google API配合使用。我有使用youtube数据api的angular2代码。我有人帮我安装。这是让我开始的原因。我想硬件部分正在为回调做准备，我相信你不用聚合物也能做到。这个例子显示了一个角度服务用来连接所有东西的棘手部分

consturl='1〕https://apis.google.com/js/client.js?onload=__onGoogleLoaded'
出口级GoogleAPI{
loadAPI：承诺
构造函数（）{
this.loadAPI=新承诺（（解析）=>{
窗口[''''uu onGoogleLoaded']=（ev）=>{
console.log（'gapi-loaded'）
解析（window.gapi）；
}
这是loadScript（）
});
}
doSomethingGoogley（）{
返回此.loadAPI.then（（gapi）=>{
console.log（gapi）；
});
}
loadScript（）{
console.log（'正在加载..'）
让节点=document.createElement（'script'）；
node.src=url；
node.type='text/javascript'；
document.getElementsByTagName（'head'）[0].appendChild（节点）；
}
}

以防您希望将其设置为静态函数，该函数始终返回承诺，但只获取一次api

consturl='1〕https://maps.googleapis.com/maps/api/js?callback=__onGoogleMapsLoaded&ey=YOUR_API_KEY';
导出类GoogleMapsLoader{
私人静态承诺；
公共静载荷（）{
//第一次调用“加载”时？
如果（！GoogleMapsLoader.promise）{
//答应装货
GoogleMapsLoader.promise=新承诺（（解决）=>{
//设置加载google地图时的回调。
窗口[''''uu onGoogleMapsLoaded']=（ev）=>{
log（'GoogleMapsAPI加载'）；
解析（窗口['google']['maps']）；
};
//添加脚本标记以加载google地图，然后触发回调，从而用windows.google.maps解析承诺。
console.log（'loading..'）；
让节点=document.createElement（'script'）；
node.src=url；
node.type='text/javascript'；
document.getElementsByTagName（'head'）[0].appendChild（节点）；
});
}
//始终返回承诺。当多次调用“加载”时，承诺已经解决。
返回GoogleMapsLoader.promise；
}
}

以下是在其他脚本中获取api的方法：

GoogleMapsLoader.load（）
.然后（_mapsApi）=>{
调试器；
this.geocoder=new _mapsApi.geocoder（）；
this.geocoderStatus=\u mapsApi.geocoderStatus；
});

我在尝试开发一个渐进式web应用程序时遇到了这个问题，即有可能不在线。代码示例中有一个错误：

onload

在谷歌地图脚本中应该是

callback

。因此，我对用户2467174的修改导致

地图加载器.service.ts

const url = 'http://maps.googleapis.com/maps/api/js?key=xxxxx&callback=__onGoogleLoaded';

@Injectable()
export class GoogleMapsLoader {
    private static promise;

    public static load() {
        // First time 'load' is called?
        if (!GoogleMapsLoader.promise) {

            // Make promise to load
            GoogleMapsLoader.promise = new Promise( resolve => {

                // Set callback for when google maps is loaded.
                window['__onGoogleLoaded'] = (ev) => {
                    resolve('google maps api loaded');
                };

                let node = document.createElement('script');
                node.src = url;
                node.type = 'text/javascript';
                document.getElementsByTagName('head')[0].appendChild(node);
            });
        }

        // Always return promise. When 'load' is called many times, the promise is already resolved.
        return GoogleMapsLoader.promise;
    }
}

然后我有一个带有

import { GoogleMapsLoader } from './map/map-loader.service';
constructor() {

    GoogleMapsLoader.load()
    .then(res => {
        console.log('GoogleMapsLoader.load.then', res);
        this.mapReady = true;
    })

和模板

<app-map *ngIf='mapReady'></app-map>

---

这是我目前正在使用的：

loadMapsScript（）：承诺{
返回新承诺（解决=>{
if（document.queryselectoral（`[src=“${mapscriptur}]”）.length）{
解决（）；
}否则{
document.body.appendChild（Object.assign（document.createElement（'script'））{
键入：“text/javascript”，
src:mapsScriptUrl，
onload:doMapInitLogic（）；
}));
}
});
}

---

请参阅我更全面的说明

这正是我想要的。这是不言自明的。谢谢在gmaps异步加载上正常工作。非常感谢。我刚刚尝试了代码，但是VS说：类型“Window”上不存在属性“gapi”。您可以使用Window['gapi']而不是Window.gapiWith Typescript，如果您在类上方声明Window对象，错误消息应该消失：

declare var Window:anyloadGoogleMapsScript（）.switchMap（（）=>loadThirdPartyScript（））感谢您的回复。Google maps有url，所以我可以使用上面的代码，但是如果第三方插件在node modules文件夹中，我该如何加载ThirdPartyScript逻辑呢？
ngOnInit() {
    if (typeof google !== 'undefined') {
        console.log('MapComponent.ngOnInit');
        this.loadMap();
    }
}