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

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

---

1. 获取js文件

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

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

3.2 修改API文件加载瓦片路径

Vd.getTilesUrl = function(a, b, c) {
      var d = a.x
        , a = a.y
        , e = Ub("normal")
        , f = 1
        , c = Ud[c];
      // this.map.Xx() && (f = 2);
      // d = this.map.gb.os(d, b).nm;
      // return (Td[Math.abs(d + a) % Td.length] + "?qt=vtile&x=" + (d + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + f + (6 == x.da.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + e + "&from=jsapi2_0").replace(/-(\d+)/gi, "M$1")
    //   tdir = 'static/map/tiles'
    //   return tdir + '/' + b + '/' + d + '/' + a + '.png'
      let tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";
    //   console.log(tdir + "/" + b + "/" + d + "/" + a + bmapcfg.imgext);
    // 可以打印看看瓦片图片地址是否正确
      return tdir + "/" + b + "/" + d + "/" + a + bmapcfg.imgext; // 使用本地的瓦片
  }

ps：地图不能显示出来，是瓦片相关有问题
地图的功能不能实现，是模块相关有问题

4. Nginx反向代理

如果你下载的瓦片图片太多，导致项目过于卡，可以使用Nginx反向代理进行解决。

server {
        #nginx代理端口
        listen       9090;
​
        #nginx代理名称，可以写域名或者ip，也可以写多个
        server_name  localhost;
​
        root   C:/Users/Administrator/Desktop/百度离线地图项目/bmap/;#百度离线的路经 用于nginx代理访问 相对于当前服务的位置
​
        location / {
            # 跨域问题
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }
        add_header Cache-Control "no-cache,must-revalidate"; #解决缓存问题

var bmapcfg = {
  'imgext': '.png', // 瓦片图的后缀  根据需要修改，一般是 .png .jpg
  'tiles_dir': 'http://127.0.0.1:9090' // 普通瓦片图的地址，为空默认在tiles/ 目录
};
var scripts = document.getElementsByTagName('script');
var JS__FILE__ = scripts[scripts.length - 1].getAttribute('src'); // 获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf('/') + 1); // 地图API主目录
​

链接：https://pan.baidu.com/s/1IYuSjop1KmowRumPHmHzZQ 

提取码：8ord

配置完如果还是不可以使用的，可以在此百度网盘链接中下载完整的压缩文件，包含 map.js 与 map_loader.js 文件与8，9级无水印瓦片地图。

完整项目目录

多标记示例

​

​

效果

本文是我亲自爬坑经历，希望能对你有所帮助。编写文章不易，希望大家多多点赞打赏！

（声明：本人前端小白，发文章只为记录自己学习过程，如果文中有什么错误欢迎大家指出。）

如果觉得这篇文章帮助了你，关注、点赞或者打赏一下都是可以的(*^▽^*)

本文参考  vue集合离线百度地图(原创)

对作者表示感谢！