Dynamically Loading Google Maps for Performance

最新推荐文章于 2017-06-23 14:18:54 发布

转载最新推荐文章于 2017-06-23 14:18:54 发布 · 84 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/abnormal/archive/2012/03/08/2385500.html

发觉google的一些应用的javascript接口API的的js文件下载有时候会比较慢，会影响网站的加载。好像Google Map API v3的js下载经常都比较慢，影响整体网页的显示效果。所以今天特别研究动态载入javascript文件。网上搜索了一下，无非都是那几个方法。不过我发现JQuery本身就自带一个动态下载javascript文件的函数，无需用一些插件。

jQuery.getScript( url, [callback] ) 官方说明

非常容易加重js文件，1.2版本之后就可以支持跨域下载javascript文件。

于是我就用了动态加载Google Map API v3的javascripte文件。

$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
alert("Script loaded and executed.");

});

虽然显示了警告信息”Script loaded and executed.”，页面变成了空白页面了，真是不解。开始怀疑JQuery的.getScript的问题，于是试了官方的示范例子，并没有问题。于是修改官方例子动态下载 google map api的js。同样页面也变成了空白页。

估计应该是google map api v3的api问题，观看了http://maps.google.com/maps/api/js?sensor=false的源代码

1 1
2
3 window.google = window.google || {};
4 google.maps = google.maps || {};
5 ( function() {
6
7    function getScript(src) {
8     document.write('<' + 'script src="http://readwall.blog.163.com/blog/' + src + '"' +
9                    ' type="text/javascript"><' + '/script>');
10   }
11
12   google.maps.Load = function(apiLoad) {
13     apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq1Ofu9DMOwRrfzS_9mNjD8hXvTS89l593ng",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[686055407],1], loadScriptTime);
14
15   };
16    var loadScriptTime = ( new Date).getTime();
17   getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");

18 })();

请看getScript()函数，函数内用了document.write来再次插入javascript文件。就是这里搞到页面空白一片。上网搜索了一下解决方法：
在下班的的两个连接内找到了方法
http://august.lilleaas.net/unobtrusive_google_maps_with_jquery
http://code.google.com/intl/zh-CN/apis/maps/articles/static+js.html

原来需要动态加载google map api的时候需要在请求js文件的时候加回调函数作为参数。请求应该是：http://maps.google.com/maps/api /js?sensor=false&callback=map_init
这样请求的时候返回的javascript与原来的是不同的。请留意下边的代码 getScript的函数不再使用document.write了。而且在javascript下载完成后会自动调用map_init()函数，需要自己写一个map_init()函数

1 window.google = window.google || {};
2 google.maps = google.maps || {};
3 ( function() {
4
5    function getScript(src) {
6      var s = document.createElement('script');
7
8     s.src = src;
9     document.body.appendChild(s);
10   }
11
12   google.maps.Load = function(apiLoad) {
13     apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq2i5W0_vw_-9fFuwYnxkPJjzoLw6PvDzbBw",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[4126402443],1], loadScriptTime);
14
15     map_init();
16   };
17    var loadScriptTime = ( new Date).getTime();
18   getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");

19 })();
这样就可以成功使用$.getScript动态加载google map api V3的javascript了。

function map_init()

{
alert("Script loaded and executed.");
}
$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=map_init");

A fellow JavaScripter was running into an issue where the standard way to load the Google Maps API was causing a perceived slow down of a single app page. The API has added the ability to get away from document.write() and dynamically load everything up.

Example code

function loadScript() {
   var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps?file=api&v=2.x&key=PUT-YOUR-KEY-HERE&async=2&callback=loadMap";
  document.body.appendChild(script);
}

function loadMap() {
   var map = new GMap2(document.getElementById("map"));
  map.setCenter( new GLatLng(37.4419, -122.1419), 6);
  map.addOverlay( new GMarker(map.getCenter()));
}

Dynamically Loading Google Maps for Performance

转载于:https://www.cnblogs.com/abnormal/archive/2012/03/08/2385500.html