开发 地图 JS API 1.4 教程 入门 JS API 的加载

JS API 的加载 最后更新时间: 2023年05月15日

JS API 支持多种加载方式,可以顺序加载也可以异步加载,同时也可以作为一般脚本资源被 RequireJS 等前端框架加载。

注意:为避免地图数据协议和前端资源不匹配导致页面运行报错,只允许在线加载 JSAPI,禁止进行本地转存、与其它代码混合打包等用法。

顺序同步加载

准备」篇中我们使用的是基本的顺序同步加载方式,这种方式下,地图初始化的代码要放在 JS API 的脚本标签之后:

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

异步加载

异步加载指的是为 JS API 指定加载的回调函数,在 JS API 的主体资源加载完毕之后,将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前,异步加载可以减少对其他脚本执行的阻塞,HTTPS 下我们也建议使用异步方式:

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

或者

window.onLoad  = function(){
    var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

使用 RequireJS 等加载

在使用 RequireJS 等前端框架时,JS API 应该被当作一般脚本资源,并使用上述异步方式进行加载,比如

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>通过RequireJS加载</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script>
  </body>
</html>

require-init.js

require.config({
  paths: {      
    "amap": "https://webapi.amap.com/maps?v=1.4.15&key=&callback=onAMapLoaded"    
  }  
});
window.onAMapLoaded = function() {
  require(['initAMap'], function(mapIniter) {
    mapIniter.init();
  })
}
require(['amap'])

initAMap.js

define(function() {    
  var init = function() {      
    var amap = new AMap.Map('container');
  };    
  return {      
    init: init
  };  
});




 

返回顶部 示例中心 常见问题 智能客服 公众号
二维码