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

最新推荐文章于 2023-12-21 21:39:33 发布

佛佛ง

最新推荐文章于 2023-12-21 21:39:33 发布

阅读量2.6k

点赞数 4

分类专栏： VUE

本文链接：https://blog.csdn.net/LzzMandy/article/details/115090314

版权

Vue-cli3 百度地图离线地图瓦片资源模块加载

关键词由CSDN通过智能技术生成

VUE 专栏收录该内容

83 篇文章 5 订阅

订阅专栏

需求

实现基于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>