Vue-cli3实现web百度离线地图(v3.0)开发
需求实现web百度离线地图(v3.0)开发项目环境Vue-cli3,目录如下,注意:需要把地图相关的文件放在public下,vue-cli2需要放在static下!!!参考主要参考下面两位大佬的文章vue-cli2+百度地图(v2.0)https://blog.csdn.net/PGguoqi/article/details/97127746vue-cli2+百度地图(v3.0)https://b
·
需求
实现基于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
定位,如下修改:
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!lzz
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; // 使用本地的瓦片
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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都不可以显示地图,注意啦!!!所以,落地成盒了!!!到此,就不再往下搞了,解决不了!
更多推荐
已为社区贡献32条内容
所有评论(0)