vue项目中使用百度离线地图（最新全面爬坑版）

伍零伍零

已于 2022-04-27 09:42:23 修改

阅读量1.3w

点赞数 20

文章标签： vue.js 百度前端

于 2022-03-14 20:24:30 首次发布

本文链接：https://blog.csdn.net/p_5050/article/details/123261394

版权

本文详述在Vue项目中集成百度离线地图的步骤，包括获取并修改js文件、下载本地资源、配置瓦片地址及使用Nginx反向代理解决性能问题。提供地图下载器资源和完整项目示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需求中需要使用百度离线地图，查找翻阅资料整理出来的最详细最新的使用步骤（内含地图下载器 - 无水印版）。希望可以帮到你。

1. 获取js文件

打开此链接，点击框中的 js 文件就可以获得百度地图api的 js 代码。点击左下角的图标，整理代码格式。

然后新建 js 文件，将格式化后的代码粘贴进去，命名为 map.js，再然后将此 js 文件放在 vue 项目中，我的放在了 static/map 下。最后，在 vue 项目的启动入口 index.html 的 head 中引入这个js。

<script src="static/map/map.js" type="text/javascript></script>

2. 修改map.js文件

以下代码会在百度更新有些出入，但基本样式不变，找相似

2.1 查找 Math.random()，定位到以下位置

function ra(a, b) {
      if(/^http/.test(a)) return;
      // ！！！！！这里加判断，如果是调用外部资源就退出去

      if (b) {
          var c = (1E5 * Math.random()).toFixed(0);
          B._rd["_cbk" + c] = function(a) {
              b && b(a);
              delete B._rd["_cbk" + c]
          }
          ;
          a += "&callback=BMap._rd._cbk" + c
      }
      var d = H("script", {
          type: "text/javascript"
      });
      d.charset = "utf-8";
      var e = window.___abvk ? window.___abvk : Ec("SECKEY_ABVK")
        , f = Ec("BMAP_SECKEY");
    //     , a = a + ("&seckey=" + encodeURIComponent(e + "," + f));
      // ！！！！！这里要引掉，不然会报错
      d.src = a;
      d.addEventListener ? d.addEventListener("load", function(a) {
          a = a.target;
          a.parentNode.removeChild(a)
      }, q) : d.attachEvent && d.attachEvent("onreadystatechange", function() {
          var a = window.event.srcElement;
          a && ("loaded" === a.readyState || "complete" === a.readyState) && a.parentNode.removeChild(a)
      });
      setTimeout(function() {
          document.getElementsByTagName("head")[0].appendChild(d);
          d = p
      }, 1)
  }

2.2 设置引入本地资源路径

B.url.domain.main_domain_nocdn.baidu 全局多查找几次，定位到下面的代码

B.kz = window.HOST_TYPE || "0";
  B.url = B.s0[B.kz];
  B.Fp = B.url.proto + B.url.domain.baidumap + "/";
  B.oc = B.url.proto + ("2" == B.kz ? B.url.domain.main_domain_nocdn.other : B.url.domain.main_domain_nocdn.baidu)