记录Vue异步加载百度地图

最新推荐文章于 2026-06-07 13:30:41 发布

原创

最新推荐文章于 2026-06-07 13:30:41 发布 · 1.2w 阅读

标签

#百度地图 #Vue百度地图

收录于

本文介绍了如何在Vue项目中避免全局引入，而是通过异步加载方式仅在需要时引入百度地图的JS文件，提高应用效率。详细步骤包括创建独立的JS文件并进行import引用，从而实现在特定页面使用百度地图的功能。

网上搜了不少资料都是index.html直接加script，个人是不喜欢这种方式，毕竟有时候只有一个页面需要到百度地图，没必要全局都加载百度地图的文件
单独新建一个js文件：loadBMap.js，名字随意取，位置可以随便放

export default function loadBMap(ak) {
   
   
  return new Promise(function(resolve, reject) {
   
   
    if (typeof BMap !== 'undefined') {
   
   
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function() {
   
   
      resolve(BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
    script