百度离线地图JS API V3.0

article/2025/8/28 16:21:39

       首先，百度地图JavaScript API 3.0版本与2.0版本相比增加了几个小功能，整体没有大的改动，具体可以在官网上查阅。于是就照着先前大佬们分享的2.0离线版本进行3.0版本的制作，附上大佬链接：最新百度地图API V2.0 离线版本  感谢大佬的分享。下面开始百度地图离线版V3.0的制作：

       资源下载地址：https://download.csdn.net/download/wml00000/10692583   

       百度云链接：https://pan.baidu.com/s/1IM-pcrhbXi--O964L7RJBg 密码：v5dv

1.JS API文件下载

       访问这个地址http://api.map.baidu.com/api?v=3.0  ，这个是引入在线js文件时的地址，打开之后是一段代码，在代码中找到  src = "http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20180823175819" ，打开这个地址，就可以看到压缩后的js代码，把这些代码粘下来，保存到本地上，就先保存在bmap_offline_api_v3.0_min.js文件里。在粘代码之前可以先格式化一下，以便下面查看与修改，利用谷歌浏览器自带的pretty print（就是下面那个红圈里的大括号工具）就可以，将格式化好的代码粘下来保存。

2.修改保存到本地的js文件

2.1屏蔽ak验证

function oa(a, b) {if (/^http/.test(a))  return;//修改  屏蔽ak验证，若调用外部资源直接返回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 e = L("script", {type: "text/javascript"});e.charset = "utf-8";e.src = a;e.addEventListener ? e.addEventListener("load", function(a) {a = a.target;a.parentNode.removeChild(a)}, t) : e.attachEvent && e.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(e);e = s}, 1)}

定位到上面代码，将带注释那行加上，千万别定位错了。

2.2引用本地工具资源

百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules,当你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的js文件下载下来，保存到本地。定位到下面代码，没数错的话，一共是44个模块。

var Ub = {  //修改，这里是所有的模块，用到时自动加载（在线），离线的话要先下载下来放到本地，如 //http://api0.map.bdimg.com/getmodules?v=3.0&mod=模块1,模块2 //模块命名格式是map_dbwcej，直接拼接起来map: "dbwcej",common: "wkrfcz",style: "fkofpc",tile: "ok3b3m",vectordrawlib: "4pdipq",newvectordrawlib: "wbnuee",groundoverlay: "ekozhc",pointcollection: "feabuc",marker: "00uyqy",symbol: "cq3a5n",canvablepath: "dia5aw",vmlcontext: "phwtog",markeranimation: "rfnmxu",poly: "r52vuo",draw: "jb4osz",drawbysvg: "vxyn51",drawbyvml: "whxmqq",drawbycanvas: "ufwkvb",infowindow: "wtflsn",oppc: "10riq5",opmb: "2c1ejz",menu: "152mop",control: "hlzh1t",navictrl: "h32mnb",geoctrl: "xprajs",copyrightctrl: "gmc2ps",citylistcontrol: "ms3ahy",scommon: "oadc3d",local: "k0pcpi",route: "v4yyam",othersearch: "pwg4ey",mapclick: "e40viw",buslinesearch: "vxmb31",hotspot: "vuwxs4",autocomplete: "punr3o",coordtrans: "lmf5kv",coordtransutils: "d33qf1",convertor: "d0ze2w",clayer: "0hwrfx",pservice: "j5tlrp",pcommon: "yqek4k",panorama: "jbqj24",panoramaflash: "dm4xq2",vector: "2hrruc"};

为了便于修改主文件里的一些内容，先创建一个map_load.js文件，加入下面代码：

var bmapcfg = {'imgext'      : '.jpg',   //瓦片图的后缀  根据需要修改，一般是 .png .jpg'tiles_dir'   : '',       //普通瓦片图的地址，为空默认在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主目录
(function(){window.BMap_loadScriptTime = (new Date).getTime();//加载地图API主文件document.write('<script type="text/javascript" src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>');
})();

在bmap_offline_api_v3.0_min.js文件中定位到   B.url.domain.main_domain_cdn.baidu[0]    ，将其所在行注释掉，加上这行

B.ka = bmapcfg.home;  //修改，本地工具资源引用(离线路径)，如图：

然后再通过 &mod  进行定位，注释掉其所在行，做如下修改：

      f.Rd.Hn.length = 0;//0 == a.length ? f.kL() : oa(f.wG.tQ + "&mod=" + a.join(","))// 修改 加载本地模块文件，在 modules 目录下console.log(a);   //打印所需模块  if( a.length > 0 ){for(i=0; i<a.length;i++){mf = bmapcfg.home+'modules/'+a[i]+'.js';oa( mf );console.log('加载模块文件:'+mf); //IE error}} else {f.kL()} //就到这}, 1));

这时候就可以创建modules文件夹，添加所需模块的js文件，注意命名格式，js代码可以这么获取：http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_dbwcej

保存js文件时文件名也是这样如map_dbwcej.js

2.3加载瓦片改为本地离线瓦片

定位到如下代码，做相应修改：

md.getTilesUrl = function(a, b, c) {var e = a.x, a = a.y, f = Sb("normal"), g = 1, c = ld[c];//this.map.Sx() && (g = 2);  //修改//e = this.map.Va.Lw(e, b).hs;//return (kd[Math.abs(e + a) % kd.length] + "?qt=tile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == z.ca.ia ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1")tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片 }

3.Demo测试

建一个demo.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">  html{height:100%}  body{height:100%;margin:0px;padding:0px}  #container{height: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")var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别  </script>  </body>  
</html>

运行前一定要准备好相关文件，如modules文件夹里的js文件，tiles文件夹里的切片，还有一些图标文件，文件大概如下：

 


http://chatgpt.dhexx.cn/article/Hd2Md6ua.shtml

相关文章

百度文件下载慢怎么办？～教你百度网盘无需VIP离线下载大文件

百度文件下载慢怎么办？～教你百度网盘无需VIP离线下载大文件

百度文件下载慢怎么办&#xff1f;&#xff5e;教你百度网盘无需VIP离线下载大文件 众所周知&#xff0c;百度网盘的文件已经对非会员进行了各种限速。不过由于国内其他网盘基本都残废了&#xff0c;百度网盘作为仅存的少数几个&#xff0c;需求还是很大的&#xff0c;经常会碰…
阅读更多...
百度地图之离线下载功能

百度地图之离线下载功能

随时随地阅读更多技术实战干货&#xff0c;获取项目源码、学习资料&#xff0c;请关注源代码社区公众号(ydmsq666) 百度SDK中提供了离线下载功能&#xff0c;这样在有网络的时候可以把地图下载下来&#xff0c;那么以后在无网的时候就可以使用地图功能了&#xff0c;百度Demo代…
阅读更多...
JavaWeb做项目所需模板-代码库(开源)

JavaWeb做项目所需模板-代码库(开源)

→→点击进入DMAKU代码库 学如逆水行舟&#xff0c;不进则退
阅读更多...
ACM图论在线画图工具分享 【csacadmy app Graph Editor】

ACM图论在线画图工具分享 【csacadmy app Graph Editor】

最近忙着写关于图论论文&#xff0c;网上找了找终于找到了这个很强大的在线画图工具&#xff0c;它可以自动生成边和顶点 你只需要按圈起来的格式输入即可 也可以选择有向边和无向边 从0开始或者从1开始 网站地址如下: https://csacademy.com/app/graph_editor/ 点击跳转 下…
阅读更多...
【编译原理】构造产生如下语言的上下文无关文法各一个：

【编译原理】构造产生如下语言的上下文无关文法各一个：

13.构造产生如下语言的上下文无关文法各一个: (1) (an bm c2m | n,m≥0 } S->AB A->ε|aA B->ε|bBcc(2) w c wR| w∈{a,b}* } S->aSa S->bSb S->c(3) {am bn ck | mn或nk } S->aSb|bSc|ε学如逆水行舟&#xff0c;不进则退
阅读更多...
【建议收藏】18个适合程序员的在线学习网站，每个我都帮您试过了！

【建议收藏】18个适合程序员的在线学习网站，每个我都帮您试过了！

关注“Java后端技术全栈” 回复“000”获取大量电子书 学如逆水行舟&#xff0c;不进则退&#xff01; 程序员是最需要学习的群体之一&#xff01; 学习的方法多种多样&#xff0c; 学习的渠道也是丰富多彩&#xff0c; 有的喜欢通过阅读技术文档来学习&#xff0c; 有的喜欢通…
阅读更多...
信息收集-目录扫描篇

信息收集-目录扫描篇

学如逆水行舟&#xff0c;不进则退&#xff1b;心似平原走马,易放难收。 ​ 网站目录本质上就是我们的文件夹&#xff0c;不同的文件夹放着不同的文件。 网站目录示例&#xff1a; 进行目录扫描可以扩大我们的测试范围&#xff0c;从而找到更多能利用的东西&#xff0c;例如…
阅读更多...
笔试面试题目：平衡二叉树的判断

笔试面试题目：平衡二叉树的判断

一. 前面的话 学如逆水行舟&#xff0c;不进则退。心如平原野马&#xff0c;易放难收。春节假期&#xff0c;基本结束&#xff0c;是该回归正常的节奏了。 生活和工作&#xff0c;需要平衡。紧张和松弛&#xff0c;亦需平衡。今天&#xff0c;我们来聊一个笔试面试题目&#…
阅读更多...
leetcode每日一题寒假版-2022-12-08 1812. 判断国际象棋棋盘中一个格子的颜色（easy)

leetcode每日一题寒假版-2022-12-08 1812. 判断国际象棋棋盘中一个格子的颜色（easy)

&#x1f6a9; 学如逆水行舟&#xff0c;不进则退。 —— 《增广贤文》 2022-12-08 1812. 判断国际象棋棋盘中一个格子的颜色&#xff08;easy) 题目描述&#xff1a; 给你一个坐标 coordinates &#xff0c;它是一个字符串&#xff0c;表示国际象棋棋盘中一个格子的坐标。下…
阅读更多...
如何养成学习的习惯

如何养成学习的习惯

微信搜索【程序员囧辉】&#xff0c;关注这个坚持分享技术干货的程序员。 前言 学如逆水行舟&#xff0c;不进则退。每天进步一点点&#xff0c;总有一天能完成蜕变。本文是自己一路上走来的一些心得体会&#xff0c;希望能帮助到一些人逐步养成学习的习惯。 本文面向的人 已经…
阅读更多...
Node.js全栈开发笔记与心得

Node.js全栈开发笔记与心得

highlight: a11y-dark 一、Node.js 全栈开发资料 1、前端入门基础 慕课网HTML CSS入门慕课网JS入门 javascript进阶篇 菜鸟教程html部分 菜鸟教程CSS部分阮一峰js入门 阮一峰es6教程 2、node 后端入门基础 node入门 Linux基础知识mysql数据库知识 数据库事务sequelize中…
阅读更多...
学习如逆水行舟，只有坚持不断的学习,才能保持进步！我置顶了这些公众号

学习如逆水行舟，只有坚持不断的学习,才能保持进步！我置顶了这些公众号

学习如逆水行舟&#xff0c;不进则退&#xff1b;只有坚持不断的学习,才能保持进步。今天给大家精心挑选的这几个优质的公众号&#xff0c;在行业深耕已久&#xff0c;相信大家一定会有所收获&#xff0c;感兴趣的可以关注一下。 前端技术精选 前端技术精选&#xff0c;分享最新…
阅读更多...
移动磁盘显示由于IO设备错误,无法运行此项请求的文件找到办法

移动磁盘显示由于IO设备错误,无法运行此项请求的文件找到办法

移动磁盘打不开由于IO设备错误,无法运行此项请求&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;星空数据恢复软件 步骤1&a…
阅读更多...
如何找回由于IO设备错误,无法运行此项请求移动磁盘的文件

如何找回由于IO设备错误,无法运行此项请求移动磁盘的文件

由于IO设备错误,无法运行此项请求说明这个盘的文件系统结构损坏了。在平时如果数据不重要&#xff0c;那么可以直接格式化就能用了。但是有的时候里面的数据很重要&#xff0c;那么就必须先恢复出数据再格式化。具体恢复方法可以看正文了解&#xff08;不格式化的恢复方法&…
阅读更多...
移动硬盘提示由于IO设备错误,无法运行此项请求，要怎样寻回资料

移动硬盘提示由于IO设备错误,无法运行此项请求，要怎样寻回资料

由于IO设备错误,无法运行此项请求说明这个盘的文件系统结构损坏了。在平时如果数据不重要&#xff0c;那么可以直接格式化就能用了。但是有的时候里面的数据很重要&#xff0c;那么就必须先恢复出数据再格式化。具体恢复方法可以看正文了解&#xff08;不格式化的恢复方法&…
阅读更多...
出现io error

出现io error

今天写软件&#xff0c;使用手机调试&#xff0c;就只有HTC D816V显示IO error错误&#xff0c;其他手机都正常&#xff08;mx4 flyme4&#xff0c;moto x 4.4.2&#xff0c;htc u11 8.0&#xff0c;nexus 6p 8.1&#xff0c;安卓模拟器6.0&#xff09;也重启试过还是不行&…
阅读更多...
硬盘提示无法访问由于IO设备错误的数据找回方法

硬盘提示无法访问由于IO设备错误的数据找回方法

D盘打不开由于IO设备错误&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;星空数据恢复软件 步骤1&#xff1a;先下载并解压…
阅读更多...
硬盘无法访问由于IO设备错误,无法运行此项请求，里面的资料怎么寻回

硬盘无法访问由于IO设备错误,无法运行此项请求，里面的资料怎么寻回

机械硬盘打不开由于IO设备错误,无法运行此项请求&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;流星数据恢复软件 步骤1&a…
阅读更多...
移动硬盘提示由于IO设备错误,无法运行此项请求数据怎么寻回

移动硬盘提示由于IO设备错误,无法运行此项请求数据怎么寻回

移动硬盘打不开由于IO设备错误,无法运行此项请求&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;AuroraDataRecovery 步骤1…
阅读更多...
机械硬盘无法访问由于IO设备错误,无法运行此项请求，里面的数据怎么找到

机械硬盘无法访问由于IO设备错误,无法运行此项请求，里面的数据怎么找到

硬盘打不开由于IO设备错误,无法运行此项请求&#xff0c;是因为这个I盘的文件系统内部结构损坏导致的。要恢复里面的数据就必须要注意&#xff0c;这个盘不能格式化&#xff0c;否则数据会进一步损坏。具体的恢复方法看正文 工具/软件&#xff1a;星空数据恢复软件 步骤1&#…
阅读更多...
推荐文章

Copyright @ 2022~2023