web端百度离线地图3.0的制作使用

最新推荐文章于 2025-05-02 14:18:05 发布

极端~

最新推荐文章于 2025-05-02 14:18:05 发布

阅读量2.2k

点赞数 4

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/han_xiao_xiao/article/details/107105342

版权

笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何在web端实现百度地图API的离线访问，包括JSAPI文件下载、修改及本地资源引用，涵盖瓦片图加载、模块文件下载与引用路径修改等步骤，最后通过测试确保功能正常。

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

花了一天的时间查了好多资料，终于地图可以在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>

在这里插入图片描述