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.

我在实际的脚本标记中尝试了'defer'和'async'，但是也会抛出相同的错误。其他加载外部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

我试图在部分视图中加载谷歌地图，这些地图将加载为标准页面（这不是问题）或引导模式并且没有运气这个错误（对于模态）：

未能执行＆＃39;写＆＃39;在＆＃39;文件＆＃39;：它是不可能写的从异步加载的外部脚本转换为文档，除非它被明确地打开了。

我没有使用脚本，因为我从我的数据模型中动态调用标记（或者至少我还没有达到目标）。无论如何，多亏了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 3

//使用jQuery的getScript函数

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

说明：

首先加载包含initialize函数的外部脚本，然后在回调时，使用callback equals初始化加载google map API。

Answer 4

您需要在正文标记结束后加载js文件。

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

4 个答案: