示例中心
功能在线体验
控制台

高德 开发 地图 JS API 开发指南 其他功能 JS API的加载

更新时间:2018年04月20日

JavaScript API支持各种不同的加载方式,你可以同步的进行JavaScript API的加载和地图的初始化,也可以将初始化放在onload事件回调中,也可以使用API的异步加载模式。另外你也可以将一些频繁使用的插件和JavaScript API一起加载,而不再需要进行plugin方式的加载。同时,如果您使用了require.js或者Sea.js, 可以按照最下面的两个场景demo实现兼容

一、顺序加载

这是一种最常见的加载方式,在这种方式下,地图初始化的代码要放在JavaScript API的JS标签之后:

<script data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
       center:[117.000923,36.675807],
       zoom:11
    });

    AMap.plugin('AMap.ToolBar',function(){
       var toolbar = new AMap.ToolBar();
       map.addControl(toolbar)
    })
</script>

二、异步加载

使用异步的方式进行JavaScript API加载的时候,地图的初始化方法建议放在JavaScript API入口文件之前,异步加载可以减少API引用之后脚本的等待执行,https建议使用异步方式:

<script data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"></script>
<script type="text/javascript">

    window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }

</script>

三、在onload中初始化

也可以等待页面加载完成之后在执行Map的初始化等地图相关代码

<script data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>

<script type="text/javascript">

   var init = function(){

       var map = new AMap.Map('container', {
          center:[117.000923,36.675807],
          zoom:11
       });

   }

</script>

四、插件与JavaScript API同步加载

通常情况下我们使用plugin方法进行插件的异步加载,对于频繁使用、或者在代码的多个地方都用到的插件,我们可以选择和JavaScript API的js文件一次引用,具体做法是在api引用的url中新增plugin参数:

<script data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&plugin=AMap.ToolBar"></script>

<script type="text/javascript">

    var map = new AMap.Map('container', {
       center:[117.000923,36.675807],
       zoom:11
    });
    map.addControl(new AMap.ToolBar({liteStyle:true}));
    
</script>

五、兼容Sea.js

<body>
  <div id="container" tabindex="0"></div>
  <script data-src="path/js/sea.js"></script>
  <script type="text/javascript">
    seajs.config({
      base: "path/",
      alias: {
          "amap": "http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"  
      }
    })
    // 加载入口模块
    seajs.use("path/js/seajs-init.js")
  </script>
</body>

seajs-init.js

define(function(require, exports, module) {
// 通过 require 引入依赖
window.init = function() {
    var mapIniter = require('path/seajs-initMap.js');
    mapIniter.init();
}
require('amap');
});

seajs-initMap.js

define(function(require, exports, module) {
// 通过 require 引入依赖
exports.init = function() {
    new AMap.Map('container')
}
});

六、兼容Require.js

<body>
   <div id="container" tabindex="0"></div>
   <script data-src="path/js/require.js" data-main="path/js/require-init"></script>
</body>

require-init.js

require.config({    
    paths: {      
        "amap": "http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"    
    }  
});
require(['amap'], function() {
    window.init = function() {
        require(['require-initMap'], function(mapIniter) {
            mapIniter.init();
        })
    }
})

require-initMap.js

define(function() {    
    var init = function() {      
        new AMap.Map('container');
    };    
    return {      
        init: init
    };  
});
移动端
示例中心
功能
在线体验
常见问题