花了一天的时间查了好多资料，终于地图可以在web端离线访问了。
参考博客：添加链接描述
主要是参考上面博主的文章做好的，非常感谢
这是我做的一个demo，可以直接用。有需要的朋友可以参考：
链接：https://pan.baidu.com/s/1uT5h0OI-142EZQeYHjwiKw
提取码：nd8q
总结一下离线开发的几点：
1.JS API文件下载
- 访问http://api.map.baidu.com/api?v=3.0
- 访问上图链接http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200702151529
将代码格式化复制，保存到本地上，就先保存在api_v3.0_min.js文件，我的是apiv1.3.min.js（这个自己命名就好）
2.修改保存到本地的api_v3.0_min.js文件
- 屏蔽ak验证
定位到这块代码，将3581行加上，if (/^http/.test(a)) return;
屏蔽ak验证，若调用外部资源直接返回
- 拷贝js文件，作为自己的本地资源
百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules,当你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的js文件下载下来，保存到本地。定位到下面代码，没数错的话，一共是41个模块。
在紧邻着的下边找到
这时候就可以创建modules文件夹，添加所需模块的js文件，注意命名格式，js代码可以这么获取：http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_bmtnyt
如果获取不到也可以是http://api0.map.bdimg.com/getmodules?v=2.0&mod=map_bmtnyt
保存js文件时文件名也是这样：map_bmtnyt.js - 修改相关引用的路径
为了便于修改主文件里的一些内容，先创建一个map_load.js文件
var bmapcfg = {'imgext': '.jpg', //瓦片图的后缀 根据需要修改，一般是 .png .jpg'tiles_dir': 'maptile/', //普通瓦片图的地址，为空默认在maptile/ 目录
};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主目录
(function () {window.BMap_loadScriptTime = (new Date).getTime();//加载地图API主文件document.write('<script type="text/javascript" src="' + bmapcfg.home + 'apiv1.3.min.js"></script>');
})();
- 修改地图api主目录——bmapcfg.home
在apiv1.3.min.js文件中定位到 url.domain.main_domain_cdn.baidu[0] ，将其所在行注释掉，加上这行D.oa= bmapcfg.home; //修改成本地瓦片资源引用(离线路径)
这块参考自己的目录怎么安排 引对相对路径就OK了 - 修改modules引用
通过 &mod 进行定位，注释掉其所在行，做如下修改：
注释掉后加上：（pa和f.CK()）对照起来
if( a.length > 0 ){for(i=0; i<a.length;i++){mf = '/map/modules/'+a[i]+'.js';pa( mf ); //该调用方法为 最开始加屏蔽ak验证 的那个方法，注意修改方法名是否更改}} else {f.CK();//注意看注释行 f调用的方法名}
- 加载瓦片改为本地离线瓦片
搜索normal，定位到下图。注释掉图中语句
3.测试
写个html页面测试一下
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hello, World</title><style type="text/css">#container{height:800px;width: 100%;}</style><script type="text/javascript" src="map_load.js"></script></head><body>
<div id="container"></div>
<script type="text/javascript">var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(121.491, 31.233); // 创建点坐标map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别map.setMinZoom(5);map.setMaxZoom(8);map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl()); //缩放按钮map.addControl(new BMap.ScaleControl());//显示地图的比例关系
</script>
</body>
</html>
