Vue-cli3实现web百度离线地图(v3.0)开发
生活随笔
收集整理的這篇文章主要介紹了
Vue-cli3实现web百度离线地图(v3.0)开发
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求
實現基于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)开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ca recorder服务器维护,故障处
- 下一篇： 计算机毕业设计springboot+vu