手记

异步加载google map api

一般来说,加载Javascript地图API只要您在页面包含一个加载API<script>标记,执行应用程序之后,加载所需的脚本就已经被下载了。不过,虽然Javascript已经被解析,您的浏览器可能不呈页面的其他内容。在大多数情况下,这种延迟并不明显,但您可能希望在加载页面完毕后加载地图API Javascript代码。您可以根据需要加载地图APIJavascript。这是很简单在页面完成后响应window.onload事件后执行页面<script>标签内代码加载地图JavaScript API,但你必须另行指示地图JavaScript API的引导行为推迟执行,直到JavaScript API完成加载后再执行您的应用程序代码。你可以在使用回调参数。这个参数作为加载函数是否执行完成的标识。

下面的代码指示应用程序完全加载页面后加载地图API(使用在window.onload),并将地图JavaScript API写入到页面的<script>标记内。此外,我们指示该API在完全加载完成后再回调执行初始化函数。

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;

 

map-simple-async.html

0人推荐
随时随地看视频
慕课网APP