Question

<head></head>内置<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

有时打开页面需要很长时间。页面加载时请参阅Read maps.gstatic.com。删除时<script src="http://maps.google.com/maps/api/js?sensor=true"></script>页面加载速度很快。

因此决定仅在加载文档的其他部分时开始加载<script src="http://maps.google.com/maps/api/js?sensor=true"></script>。

尝试

$(document).ready(function() {
$.getScript("http://maps.google.com/maps/api/js?sensor=true");
});

但是得到错误uncaught exception: Google Maps API is required. Please register the following JavaScript library http://maps.google.com/maps/api/js?sensor=true.

还尝试了这个https://developers.google.com/maps/documentation/javascript/examples/map-simple-async外部文档

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://maps.google.com/maps/api/js?sensor=true';
  document.body.appendChild(script);
}
window.onload = loadScript;

得到同样的错误

只有在加载了其他内容后才能更改加载谷歌地图脚本的内容？

Answer 1

您已在script-url中省略了所需的callback-parameter。

此callback参数应该是全局函数的名称。

在调用此函数之前，您可能无法访问google.maps - 属性/方法，因此此函数是您应该在的位置。创建地图或请求服务。将所有与google.maps相关的脚本包装到此函数中。

当您加载需要maps-API的库（例如MarkerClusterer）时，您还必须异步加载这些库（在回调中），并在加载库时运行基于此库的脚本。

基于错误消息我想你想使用GMaps - 库（当然需要maps-API）。

用于异步加载maps-API和GMaps的示例：

//script-loader
function loadScript(url,callback){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    if(typeof callback==='function'){
      script.addEventListener('load',callback,false);
    }
    script.setAttribute('src',url);
    document.body.appendChild(script);
}
  
//callback-function for load of maps-API
function init(){
    alert(['init',
           '---------',
           'google.maps->'+typeof google.maps,
           'GMaps->'+typeof window.GMaps 
          ].join('\n'));
    
    //callback-function for load of GMaps-library
    init2=function(){
       alert(['init2',
           '---------',
           'google.maps->'+typeof google.maps,
           'GMaps->'+typeof window.GMaps 
          ].join('\n'));
      new GMaps({
        div: '#map',
        lat: 0,
        lng: 0,
        zoom:1
      });
    }
    //load GMaps
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js',init2);
}

//load the maps-API asynchronously  
window.addEventListener(
 'load',
 function(){
  loadScript('https://maps.google.com/maps/api/js?v=3&callback=init')
 },
 false);

      html ,
      body ,
      #map{ 
        height: 100%; margin: 0; padding: 0;
      }

<div id="map"></div>

Answer 2

为此付出了一些努力……具有讽刺意味的是，找到了一种更简单的方法来完成工作并准备好文档。他们的关键是要同步加载它。

 <div id="map"></div>
 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key='Your KEY'>&callback=InitMap&language=en">
 </script>

jquery仅在文档准备好时才获取maps.google.com

2 个答案: