在使用百度地图 JavaScript API（JSAPI）之前，需要先在页面中完成 API 的加载。百度地图JSAPI 提供了多种加载方式，以满足不同项目和开发框架的需求。
开发者可以根据项目类型选择合适的加载方式：

• Script 标签同步加载（推荐）

• Script 标签异步加载

JSAPI 在同一页面中只需要加载一次。一次加载以后，可以创建多个地图实例，每个实例对应一个独立的容器元素。

适用于大多数 Web 项目，无需额外构建工具，只需在页面中引入 JSAPI 即可。

<script src="https://api.map.baidu.com/api?v=4.0&ak=您的AK"></script>

加载完成后，即可直接使用地图相关对象。

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

如果页面并非首次进入就需要展示地图，可以按需动态异步加载 JSAPI，以减少首屏资源开销。JavaScript API 支持异步加载，您可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例：

function initMap() { 
    var map = new BMap.Map('container');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
} 
    
function loadScript() { 
    var script = document.createElement("script"); 
    // callback参数传入上面的地图初始化函数
    script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥&callback=initMap";
    document.body.appendChild(script); 
} 
    
document.getElementById('open_map_modal').addEventListener('click', function() {
    loadScript();
});