页面加载后如何加载谷歌地图外部javascript？

Question

我将提供更多信息来解释我的情况。我正在使用 PhoneGap 构建一个应用程序以在 iOS 上进行部署。我有一个用户将导航到的视图/页面（不使用 ajax），它将加载所需的 google maps js 脚本并调用cordova geolocation api。

我的问题是加载谷歌地图脚本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true"></script>

加载时间过长，并且页面停止渲染长达近 3 秒。我想推迟外部脚本的加载，直到页面完全呈现。将之前的脚本放在页面底部根本没有帮助。

我试图使用 getScript() 但它不起作用并在调试控制台中抛出以下错误：

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

我在实际的脚本标签中尝试了“延迟”和“异步”，但这也会引发同样的错误。加载外部 JS 文件的其他方法让我收到相同的错误消息。

是否有任何可能的解决方法来解决这个问题。我什至不知道错误语句是什么意思...

Answer 1

我尝试了我的这个解决方案，它奏效了。

使用 jquery 在准备好的 dom 上运行脚本。

基本上不是像这样使用function initialize：

function initialize(){
/*You code */
}

这样做：

$(function(){
/*You code */
})

也不需要google.maps.event.addDomListener(window, 'load', initialize);

没有了。

---

编辑#1：我目前面临一些您熟悉的问题，我想我现在有更好的解决方案。

在你的 JS 文件中，在你的初始化函数之后，放入这个函数：

var ready: // Where to store the function

    ready = function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=initialize';
      document.body.appendChild(script);
    };

它的基本作用是先调用地图加载器，然后在加载器准备好后再调用地图。
然后利用你刚才写的这个

在您的 html 页面中：

<script>
    $.getScript("You js file path",function(){
          $(document).ready(ready);
    });
</script>

这会获取脚本，以便您可以使用它的变量，然后在 DOM 准备好并完成加载后调用您需要的变量ready。

我建议在正文关闭后将其放在 html 页面的底部。

Answer 2

//使用jQuery的getScript函数

$.getScript('[js containing the initialize function]',function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize');
}); 

解释：

首先加载包含初始化函数的外部脚本，并在回调时加载谷歌地图 API，回调等于初始化。

Answer 3

我试图在部分视图中加载谷歌地图，该视图将作为标准页面（这不是问题）或引导模式加载，但没有遇到此错误（对于模式）：

在“文档”上执行“写入”失败：无法写入 从异步加载的外部脚本到文档中，除非 它是显式打开的。

我没有使用脚本，因为我正在从我的数据模型中动态调用标记（或者至少我还没有做到这一点）。无论如何，多亏了 Hamza，我才得以使用它：

<div id="map-canvas" style="width:512px;height:464px;"></div>

@*<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>*@
    <script type="text/javascript">
    function initialize() {
        var mapDiv = document.getElementById('map-canvas');

        var mapOptions = {
            zoom: 1,
            minzoom: 1,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapDiv, mapOptions);

        //var markers = getMarkers(map);
        map.setCenter({ lat: 0, lng: 0 });

    };

    //google.maps.event.addDomListener(window, 'load', initialize);
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initialize';
    document.body.appendChild(script);
</script>

再想一想，我还必须从我的模态中删除淡入淡出，这与其他人评论说他们必须将执行延迟一秒钟有关。我尝试了 resizetarget 修复以及所有这些都没有运气。

在这一点上进行了很多试验和错误，希望能节省一些时间。

Answer 4

需要在body标签结束后加载js文件。