Google Maps API V3 异步加载 JavaScript API

[honeymoose]

一般来说，如果您是通过以下方法加载页面的话，那么 JavaScript Maps API 会在页面加载时立即加载：即使用 标记加入 API 并在脚本加载完毕后执行应用程序 JavaScript 代码。

然而，当解析该 JavaScript 时，您的浏览器可能不会在页面上呈现其他内容。

大部分情况下，这一延迟并不会引起注意，但是您可能会希望在页面加载完毕后再加载 Maps API JavaScript 代码，或者根据需要加载 Maps API JavaScript。

要在页面加载完毕后再加载 Maps JavaScript API，方法十分简单：您只需插入自己的 标记作为对 window.onload 事件的响应即可；但您还需要指示 Maps JavaScript API 引导程序在 Maps JavaScript API 代码完全加载后再执行应用程序代码。

要实现此目的，您可以使用 callback 参数。

该参数是在 API 加载完毕时，函数要执行的变量。

以下代码可指示应用程序在页面完全加载后再加载 Maps API（使用 window.onload），并在该页面中将 Maps JavaScript API 写入 标记。此外，我们还通过向 Maps API 引导程序传递 callback=initialize 来指示该 API 仅在自身完全加载后再执行 initialize() 函数：[code]function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}

function loadScript() {
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://maps.google.com/maps/api/js?sensor=false&callback=initialize”;
document.body.appendChild(script);
}

window.onload = loadScript;[/code]示例程序[code]

Google Maps JavaScript API v3 Example: Asynchronous Map Simple function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

[/code]程序运行结果：