整体思路:
说明:这边用的是apiv1.3版本,现在的版本没有进行尝试(基本地图功能都OK可以实现)。
1.先在可上网电脑上引用正确的 http://api.map.baidu.com/api?v=1.3 地址,可以看到引用的一些js和css,进行下载到本地,进行引用(一个是基本样式,一个是基本js);
2.在下载常用的地图模块(map,oppc,tile,control,marker)https://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker%E2%80%9D
这些就是我们在地图所使用的的点、线、标注等,如果还需要其他的模块,在线做一个demo看浏览器的控制台Network中有关modules的链接数据进行下载保存到 一个modules文件 中直接引用
3.下载离线地图瓦片(好多软件可以进行下载,不过好像都没有最深层的,毕竟数据量大,我用的是 全能地图下载器,注意下载百度的地图瓦片)
4.将我们下载引用的 bmap.css 打开里面有我们所需的png,进行下载放到本地并修改bmap.css中的路径
5.我这边用的是覆盖层进行地图瓦片的覆盖就是在地图上覆盖一层瓦片,我的所有功能没有受影响(还有一种是更好的但是复杂一些就是直接修改下载的 apiv1.3.min.js 里对瓦片调用url的修改,这里我没做详细研究,为了进度)
var tileLayer = new BMap.TileLayer({
isTransparentPng: true
});
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return '本地文件名' + '/' + zoom + '/' + x + '/' + y + '.png';
}
var map = new BMap.Map('container');
map.addTileLayer(tileLayer);
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(, ), 19);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
6.启动查看控制台会发现Network回头很多404错误(断网没有缓存),这是因为 apiv1.3.min.js 里面有最底层瓦片调用和一些js引用,挨个选择名称去 apiv1.3.min.js 查找去修改其url 或直接return null 就行(我们所有的依赖是直接在页面有引用所以不需要 apiv1.3.min.js 去帮我们引);下图是我所有引用文件
<link rel="stylesheet" href="css/bmap.css">
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<script type="text/javascript" src="js/modules"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/Lushu_min.js"></script>