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

• JSAPI Loader 加载器加载（npm工程化项目推荐）

• Script 标签同步加载（简单场景推荐）

• Script 标签异步加载

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

适用于使用 Webpack、Vite 等构建工具的工程化项目。通过官方加载器  @baidumap/jsapi-loader 的 load() 方法异步加载 JSAPI，返回 Promise。

npm i @baidumap/jsapi-loader

引入加载器后调用 load()，传入密钥和版本，在 Promise 完成后使用返回的命名空间对象创建地图。

import BMapLoader from '@baidumap/jsapi-loader';

BMapLoader.load({
    ak: '您的密钥',  // 申请好的浏览器端密钥，非代理模式必填
    version: '4.0'  // 指定要加载的 JSAPI 版本，缺省时默认为 4.0
}).then((BMap) => {
    const map = new BMap.Map('container');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
}).catch((e) => {
    console.error(e);
});

load() resolve 出对应版本的命名空间对象：3.0 / 4.0 为 window.BMap，gl 为 window.BMapGL。

将 AK 配置在服务端时，前端设置 serviceHost 后不再传递 AK。服务端需将该地址反向代理到 https://api.map.baidu.com 并注入 ak。

BMapLoader.load({
    version: '4.0',
    serviceHost: 'https://your-domain.com/_BMapService/' // 末尾 "/" 必需，且不传 ak
});

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

<script src="https://api.map.baidu.com/api?v=4.0&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();
});

脚本地址与同步加载一致，仅额外通过 callback 参数指定加载完成后自动调用的回调函数名，在回调中创建地图即可。下方为在线示例：