关于Google Maps过慢可以使用异步加载Google Maps JS 库

2014-12-10 00:00:00 by 【6yang】, 1183 visits, 收藏 | 返回

在之前的教程中，使用的都是同步加载Google Maps JS 库的方式进行Google Maps的开发。但是做过网站开发的都清楚，在使用同步方式加载js的时候，如果js的源路径出现问题，会导致长时间的网页加载（尤其在国内，Google的服务因为这样那样的原因很不稳定），所以推荐使用异步加载的方式。

加载方法

1.去掉head标签Google Maps js库，即下面这行代码

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API KEY&sensor=true"></script>

2.定义异步加载函数

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

其中callback对应的是异步加载完之后调用的函数。

3.启动异步加载

window.onload = loadScript;

完整方案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>基本地图显示</title>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(25.091075 , 121.55983449999997)
};
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?v=3.exp&key=AIzaSyB062x7b2UUvRIMLRIHJ8rFaZXGSkca89c&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

后话

这种方法会在一定程度上提高网页加载速度，不过在网速较慢的情况下，用户体验并不好（貌似网速慢无论哪种加载方式的用户体验都不好），基于国内的情况，可以考虑使用https的加载方式。方法如下

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>

代码如下：
var mapcanvas_id = 'map_canvas';
   function loadScript() {
       var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'http://ditu.google.cn/maps/api/js?sensor=false&v=3&language=en&callback=initialize_google_fn';//&callback=initialize_google_fn
          //https://maps.googleapis.com/maps/api/js?sensor=false&v=3&language=en&callback=initialize_google_fn 国外https访问
          document.body.appendChild(script);
         window.initialize_google_fn = function(){
           MAPS_fn.initialize(idata, _map_lat, _map_lng, _map_zoom, mapcanvas_id);
         };
   }
   window.onload = loadScript;

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1405&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

关于Google Maps过慢可以使用异步加载Google Maps JS 库

加载方法

完整方案

后话

图片原图