需求

实现基于Vue-cli3的web百度离线地图(v3.0)开发

Vue-cli3，目录如下，注意：需要把地图相关的文件放在public下，vue-cli2需要放在static下！！！

参考

主要参考下面两位大佬的文章

vue-cli2+百度地图（v2.0）https://blog.csdn.net/PGguoqi/article/details/97127746

vue-cli2+百度地图（v3.0）https://blog.csdn.net/JavaBigADog/article/details/103745000

实现步骤

一、下载百度离线地图.js文件

1.百度地图开发平台地址：http://lbsyun.baidu.com/,选择开发文档/Web开发/JavaScript API

2.选择v3.0的地图示例

3.进入地图页面，按F12，找到在线js请求地址：

http://api.map.baidu.com/getscript?v=3.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20210201100830

4.在浏览器中输入上面的地址，请求到js文件

5.全部复制，在站长工具 http://tool.chinaz.com/tools/jsformat.aspx 格式化

6.保存在map.js文件中，放在public/map文件夹下

7.在`index.html`的head中引入map.js

<head><meta charset="utf-8" /><meta content="IE=edge" http-equiv="X-UA-Compatible" /><meta content="width=device-width,initial-scale=1.0" name="viewport" /><link href="<%= BASE_URL %>favicon.ico" rel="icon" /><script src="./map/map.js"></script><title>系统</title>
</head>

二、修改map.js

1、不进行外部访问，搜索`Math.random()` 进行定位，添加代码 if (/^http/.test(a)) return;

2、引用本地资源路径，搜索main_domain_cdn.webmap[0]定位，修改D.ij=''

3、修改map.js依赖的模块为本地模块，可以在map.js中找到所有需要的模块，在第1步添加代码 if (/^http/.test(a)) return;的下面

4.可以全部下载，也可以下载依赖的一些模块，搜索 &mod= 定位，通过console.log打印所需要的模块，

0 == a.length ? f.WK() : qa(f.lG.YP + "&mod=" + a.join(","))先不要注释

5.在需要引用地图的.vue文件中加载地图

<div class="bmap" id="container">地图展示</div>mounted: function () {this.$nextTick(() => {this.initBMap()})
},initBMap(){var map = new BMap.Map("container");var point = new BMap.Point(120.04123, 36.292746);map.centerAndZoom(point,8);//8级之后就不行了map.enableScrollWheelZoom();
},

这时候，可以看到控制台打印的依赖的.js文件，可以只下载这些文件

6.使用http://api0.map.bdimg.com/getmodules?v=3.0&mod=common_qfikm4下载， &mod= 之后的参数替换成我们打印出来的模块名，所有的模块保存在modules文件夹下

三、下载瓦片资源

1、使用太乐软件，安装之后

注意：因为是免费的，最多只能下载到15级！！！

2、把下载的左右瓦片保存在tiles文件下

3.新建map_loader.js，放在public下，如上图所示

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主目录///

4、在index.html中，map_loader.js放在map.js之前

    <script src="./map_loader.js"></script><script src="./map/map.js"></script>

5、加载本地瓦片路径，在map.js中搜索`getTilesUrl` 定位，如下修改：

//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!lzzlet 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; // 使用本地的瓦片
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

6、加载本地模块.js文件，在打印模块的地方，搜索 &mod= 定位，如下修改：

if( a.length > 0 ){for(let i=0; i<a.length;i++){let mf = bmapcfg.home+'modules/'+a[i]+'.js';qa( mf );console.log('加载模块文件:'+mf); //IE error
} else {f.WK()
}

7、看一下控制台打印的模块及瓦片

四、地图展示与事件

8级地图展示如下：

地图出来了，但是不能移动和缩放，肯定是依赖的模块.js 文件的问题，F12发现head中没有那些.js文件，尝试在index.html中直接引入，地图可使用！！！！！！

    <script src="./map_loader.js"></script><script src="./map/map.js"></script><script src="./modules/map_0zz35j.js"></script><script src="./modules/scommon_iqmr35.js"></script><script src="./modules/mapclick_iyqbbp.js"></script><script src="./modules/oppc_g2tfrd.js"></script><script src="./modules/style_e0pfib.js"></script><script src="./modules/tile_0es0ze.js"></script>

map.centerAndZoom(point,9);

通过设置地图的等级，发现从第9级开始，地图不能显示出来，通过打印的瓦片数据，发现本地瓦片中没有那些图片资源，9-15都不可以显示地图，注意啦!!!所以，落地成盒了！！！到此，就不再往下搞了，解决不了！

Vue-cli3实现web百度离线地图(v3.0)开发相关推荐

web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
百度离线地图API2.0 百度离线地图api,已经修改源码
百度离线地图API2.0 百度离线地图api,已经修改源码,绕过服务端验证,除了路书等需要服务端数据支持的功能外,其余功能已经全部实现,包括常用的:地图示例.地图控件添加.覆盖物添加.信息窗口展示等等 ...
百度离线地图JSAPIV3.0
原文地址::百度离线地图JSAPIV3.0 - 百度文库相关文章 1.百度离线地图API V2.1 内含示例Demo,亲测可用----百度离线地图API V2.1 内含示例Demo,亲测可用 - 开 ...
vue百度离线地图v3.0---初始化地图
1. 百度离线文件百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器百度网盘下载:http ...
vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
【web百度离线地图开发】原生实现百度地图离线版速览
需求如下,在基于在线地图的基础上展现离线地图 //在线用以下插件展示"vue-baidu-map": "^0.21.22", vue中展示离线地图第一步:把配 ...
百度离线地图APIV2.0
离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了......哈哈哈哈哈!!! 支持各大主流浏览器 IE7.8.9.10.11,火狐.360浏览器.谷歌浏览器如果 ...
百度离线地图 api3.0
仅自己记录,参照博客为以下地址: https://blog.csdn.net/wml00000/article/details/82219015 1.链接:https://pan.baidu.com/ ...
vue百度离线地图v3.0---区域划分
1. 效果图 2. 用到的工具和组件请先下载下面js部分用到的工具和组件,css也放在这里,如有需要可以自行下载百度地图下载:https://pan.baidu.com/s/1IUaissSB_x ...

Vue-cli3实现web百度离线地图(v3.0)开发

需求

参考

实现步骤

一、下载百度离线地图.js文件

1.百度地图开发平台地址：http://lbsyun.baidu.com/,选择开发文档/Web开发/JavaScript API

2.选择v3.0的地图示例

3.进入地图页面，按F12，找到在线js请求地址：

http://api.map.baidu.com/getscript?v=3.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20210201100830

4.在浏览器中输入上面的地址，请求到js文件

5.全部复制，在站长工具 http://tool.chinaz.com/tools/jsformat.aspx 格式化

6.保存在map.js文件中，放在public/map文件夹下

7.在`index.html`的head中引入map.js

二、修改map.js

1、不进行外部访问，搜索`Math.random()` 进行定位，添加代码 if (/^http/.test(a)) return;

2、引用本地资源路径，搜索main_domain_cdn.webmap[0]定位，修改D.ij=''

3、修改map.js依赖的模块为本地模块，可以在map.js中找到所有需要的模块，在第1步添加代码 if (/^http/.test(a)) return;的下面

4.可以全部下载，也可以下载依赖的一些模块，搜索 &mod= 定位，通过console.log打印所需要的模块，

0 == a.length ? f.WK() : qa(f.lG.YP + "&mod=" + a.join(","))先不要注释

5.在需要引用地图的.vue文件中加载地图

6.使用http://api0.map.bdimg.com/getmodules?v=3.0&mod=common_qfikm4下载， &mod= 之后的参数替换成我们打印出来的模块名，所有的模块保存在modules文件夹下

三、下载瓦片资源

1、使用太乐软件，安装之后

注意：因为是免费的，最多只能下载到15级！！！

2、把下载的左右瓦片保存在tiles文件下

3.新建map_loader.js，放在public下，如上图所示

4、在index.html中，map_loader.js放在map.js之前

5、加载本地瓦片路径，在map.js中搜索`getTilesUrl` 定位，如下修改：

6、加载本地模块.js文件，在打印模块的地方，搜索 &mod= 定位，如下修改：

7、看一下控制台打印的模块及瓦片

四、地图展示与事件

8级地图展示如下：

地图出来了，但是不能移动和缩放，肯定是依赖的模块.js 文件的问题，F12发现head中没有那些.js文件，尝试在index.html中直接引入，地图可使用！！！！！！

通过设置地图的等级，发现从第9级开始，地图不能显示出来，通过打印的瓦片数据，发现本地瓦片中没有那些图片资源，9-15都不可以显示地图，注意啦!!!所以，落地成盒了！！！到此，就不再往下搞了，解决不了！

Vue-cli3实现web百度离线地图(v3.0)开发相关推荐

最新文章

热门文章

Vue-cli3实现web百度离线地图(v3.0)开发

需求

参考

实现步骤

一、下载百度离线地图.js文件

1.百度地图开发平台地址：http://lbsyun.baidu.com/,选择 开发文档/Web开发/JavaScript API

2.选择v3.0的地图示例

3.进入地图页面，按F12，找到在线js请求地址：

http://api.map.baidu.com/getscript?v=3.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20210201100830

4.在浏览器中输入上面的地址，请求到js文件

5.全部复制，在站长工具 http://tool.chinaz.com/tools/jsformat.aspx 格式化

6.保存在map.js文件中，放在public/map文件夹下

7.在index.html的head中引入map.js

二、修改map.js

1、不进行外部访问，搜索Math.random() 进行定位，添加代码 if (/^http/.test(a)) return;

2、引用本地资源路径，搜索main_domain_cdn.webmap[0]定位，修改D.ij=''

3、修改map.js依赖的模块为本地模块，可以在map.js中找到所有需要的模块，在第1步添加代码 if (/^http/.test(a)) return;的下面

4.可以全部下载，也可以下载依赖的一些模块，搜索 &mod= 定位，通过console.log打印所需要的模块，

0 == a.length ? f.WK() : qa(f.lG.YP + "&mod=" + a.join(","))先不要注释

5.在需要引用地图的.vue文件中加载地图

6.使用http://api0.map.bdimg.com/getmodules?v=3.0&mod=common_qfikm4下载， &mod= 之后的参数替换成我们打印出来的模块名，所有的模块保存在modules文件夹下

三、下载瓦片资源

1、使用太乐软件，安装之后

注意：因为是免费的，最多只能下载到15级！！！

2、把下载的左右瓦片保存在tiles文件下

3.新建map_loader.js，放在public下，如上图所示

4、在index.html中，map_loader.js放在map.js之前

5、加载本地瓦片路径，在map.js中搜索getTilesUrl 定位，如下修改：

6、加载本地模块.js文件，在打印模块的地方，搜索 &mod= 定位，如下修改：

7、看一下控制台打印的模块及瓦片

四、地图展示与事件

8级地图展示如下：

地图出来了，但是不能移动和缩放，肯定是依赖的模块.js 文件的问题，F12发现head中没有那些.js文件，尝试在index.html中直接引入，地图可使用！！！！！！

通过设置地图的等级，发现从第9级开始，地图不能显示出来，通过打印的瓦片数据，发现本地瓦片中没有那些图片资源，9-15都不可以显示地图，注意啦!!!所以，落地成盒了！！！到此，就不再往下搞了，解决不了！

Vue-cli3实现web百度离线地图(v3.0)开发相关推荐

最新文章

热门文章

1.百度地图开发平台地址：http://lbsyun.baidu.com/,选择开发文档/Web开发/JavaScript API

7.在`index.html`的head中引入map.js

1、不进行外部访问，搜索`Math.random()` 进行定位，添加代码 if (/^http/.test(a)) return;

5、加载本地瓦片路径，在map.js中搜索`getTilesUrl` 定位，如下修改：