- JS--API下载
- 访问地址:http://api.map.baidu.com/api?v=3.0(有百度API密钥的可以加上密钥:http://api.map.baidu.com/api?v=3.0&ak=密钥),选择如图并访问
- 访问:http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200109192240获得如图,复制保存下来
- 保存文件名自定义:bmap_offline_api_v3.0_min.js
- 最后在使用地方引入js
- 修改API文件
- 屏蔽ak验证
- 在bmap_offline_api_v3.0_min.js文件中查找Math.random()代码,多查找几次具体命名可能会有所不同,并且新增代码如下,结果如下
-
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! if (/^http/.test(a)) return;//修改 屏蔽ak验证,若调用外部资源直接返回 //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- 设置引入本地资源路径
- 在bmap_offline_api_v3.0_min.js文件中查找url.domain.main_domain_nocdn.baidu或者main_domain_nocdn代码,多查找几次具体命名可能会有所不同,并且新增代码如下,结果如下
-
D.oa = bmapcfg.home这个等配置mp_load.js后配置,在下步
- 屏蔽ak验证
- 下载本地资源
- 所谓本地资源,就是在使用地图时需要用到的一些模块(module),比如图层类,标记类,控件类。
- 首先,在
bmap_offline_api_min.js
文件中,用&mod=
定位到下面的代码,然后加一行代码将用到的模块打印出来: - 在html页面中编写加载百度地图API
- 访问,在控制台上获取打印结果,为功能需要的模板名
- 访问网址:http://api0.map.bdimg.com/getmodules?v=3.0&t=20140707&mod=模板名,比如http://api0.map.bdimg.com/getmodules?v=3.0&t=20140707&mod=common_yus52z,获得js资源拷贝到/modules/模板名.js,如图:
- 引用本地资源
- 在上面步骤打印模块名的地方,做如下修改:
- 要注意路径问题,如果不对会报错
- 加载瓦片资源(资源自行百度下载)
- 下载/购买链接(咸鱼):https://market.m.taobao.com/app/idleFish-F2e/widle-taobao-rax/page-detail?wh_weex=true&wx_navbar_transparent=true&id=656896500898&ut_sk=1.YVA54qNv6UUDAGRWhXjEUw1%2B_12431167_1636447486922.Copy.detail.656896500898.2903781529&forceFlush=1https://market.m.taobao.com/app/idleFish-F2e/widle-taobao-rax/page-detail?wh_weex=true&wx_navbar_transparent=true&id=656896500898&ut_sk=1.YVA54qNv6UUDAGRWhXjEUw1%2B_12431167_1636447486922.Copy.detail.656896500898.2903781529&forceFlush=1
- 配置位置
- 瓦片配置文件
-
var bmapcfg = { 'imgext': '.jpg', //瓦片图的后缀 根据需要修改,一般是 .png .jpg 'tiles_dir': '/baiduOffline/tiles' //普通瓦片图的地址,为空默认在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("/js") + 1); //地图API主目录
-
在html中引入该配置文件
-
修改瓦片路径:在bmap_offline_api_v3.0_min.js文件中查找
getTilesUrl
代码,多查找几次具体命名可能会有所不同,并且修改代码如下,结果如下 -
Hd.getTilesUrl = function (a, b, c) { var e = a.x, a = a.y, f = Sb("normal"), g = 1, c = Gd[c]; // this.map.ax() && (g = 2); // e = this.map.Xe.Xv(e, b).Sl; // return (Fd[Math.abs(e + a) % Fd.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == z.fa.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1") //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! let tdir = bmapcfg.tiles_dir.length > 0 ? bmapcfg.tiles_dir : bmapcfg.home + "tiles"; // console.log(tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext) return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片 //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! };
- 刷新页面出现及成功
百度离线地图研发 laravel框架
于 2020-02-27 16:07:49 首次发布