高德地图JS API 的加载方式有哪些 - 北京炫码科技有限公司

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

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

1.顺序同步加载

篇中我们使用的是基本的顺序同步加载方式，这种方式下，地图初始化的代码要放在 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>

2.异步加载

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

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);

或者

<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>

使用 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
  };　　
});

0 0 投票数

文章评分