Google 在 ionic 2 中放置 api 错误答案

【问题标题】：Google places api error in ionic 2Google 在 ionic 2 中放置 api 错误
【发布时间】：2017-10-02 20:40:09
【问题描述】：

我在 ionic 应用程序中使用 google places api。我将 google places api 脚本放在 index.html 中。该应用程序允许用户在特定位置访问 wifi。用户使用我们的应用程序登录后即可访问互联网。当应用程序启动并且用户连接到我们的网络时，用户无法访问互联网。所以我得到错误：

应用程序错误连接到服务器不成功。

有没有办法在用户可以上网后调用google places api来避免错误？

【问题讨论】：

您可以为此使用例如network plugin
@Kaddath 我把谷歌 api 放在 index.html 中。那么我该如何使用这个插件呢？因为 index.html 在应用启动时首先执行。
我会写一个anwser，不适合评论

标签： ionic-framework ionic2

【解决方案1】：

这已经在 ionic 1 中进行了快速测试并且它可以工作，没有理由不应该在 ionic 2 中。但是如果您知道在 angular 中添加脚本标签的正确方法，只需替换这部分。逻辑只是将您的资源动态添加到 index.html。不要忘记在应用程序已经启动时可以出现连接，并且您不需要添加两次标签（必须进行验证）。可能会进行一些修改以适应 ionic 2，抱歉我的版本是在 1 上制作的。

添加脚本的函数：

function addScriptTag(){
    //STORE HERE VALUE TO VERIFY SCRIPT HAS ALREADY BEEN ADDED
    var script = document.createElement('script');
    script.src = 'http://maps.google.com...';
    script.type = 'text/javascript';
    document.head.appendChild(script);
}

在 $ionicPlatform.ready 中（在此之前网络不可用）

//CONNECTED AT APP LOADING
var networkState = navigator.connection.type;
if(networkState !== Connection.NONE){
    addScriptTag();
}

//IN CASE CONNEXION ARRIVES LATER
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
    if( /* VERIFY SCRIPT NOT ADDED BEFORE */ ){
         addScriptTag();
    }
}, false);

【讨论】：