麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Google Maps(JS)开发入门(7):异步加载Google Maps JS 库

在之前的教程中,使用的都是同步加载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>
麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到麻辣GIS QQ群中提问。

QQ群(一):291616564 加入QQ群

QQ群(二):166408035 加入QQ群

QQ群(三):627853279 加入QQ群

QQ群(四):436386604 加入QQ群

QQ群(五):606176554 加入QQ群

QQ群(六):946178380 加入QQ群

QQ群(七):861271808 加入QQ群

新疆互助群:910717627 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论