1.下载地图瓦片

下载瓦片的工具有很多，但有一些地图太老了，有一些要收费，这里使用的是小郭大佬提供的工具

百度地图离线http://www.xiaoguo123.com/p/baidumap_offline_v3_use/

2.引入

下载好瓦片之后，按照工具教程中的步骤

（1）拷贝bmap-offline文件夹至你的项目下（public下的static文件夹）
（2） HTML页面中引用map3.0_init.js和map3.0.js
（3）普通地图瓦片存放在bmap-offline\tiles\

<script src="./static/bmap-offline/map3.0_init.js"></script>
<script src="./static/bmap-offline/map3.0.js"></script>

这样就已经完成了，可以断网进行测试

3.优化引入

这里可以进行引入的优化，我就只有一个说明页面要使用地图，其他的都不需要，在html中的话，一上来就会引，有些没必要，而且瓦片还比较大。

//封装动态创建script
function mapJs(src) {return new Promise((resolve,reject)=>{const script = document.createElement('script');script.type = "text/javascript";script.setAttribute("data-callType","callScript");script.src= src;document.body.appendChild(script);script.onload = ()=>{resolve();}script.onerror = ()=>{reject();}})
}export default mapJs

在页面中使用时

//创建beforeRouteEnter(to, from, next) {(async () => {try {await mapJs(`${window.mapInitUrl}`);await mapJs(`${window.mapUrl}`);next();} catch{console.log('map错误！！！！！！');next();}})();},
//删除beforeRouteLeave(to, from, next) {const callScript = document.querySelectorAll("script[data-callType='callScript']");callScript.forEach((el) => {document.body.removeChild(el);});next();}

调mapJs时传的参数只是我把路径存起来了

"./static/bmap-offline/map3.0_init.js"与 "./static/bmap-offline/map3.0.js"

最后其实也可以不用删除script，就在创建前判断一下，不要重复创建就好。

4.最后效果

5.vue-baidu-map的一些配置代码

    <baidu-mapclass="bm-view"ak="xxxxxx":center="center":zoom="zoom":min-zoom="12":scroll-wheel-zoom="true":inertial-dragging="true"@ready="handler"><bm-maker :position="center" @click="infoWindowShow = true"></bm-maker><bm-info-window:position="center":show="infoWindowShow":closeOnClick="false"@close="infoWindowShow = false":width="380":height="0"><div class="info-window"><v-form   //这个是我的组件，就是那个框里的内容信息class="demo-ruleForm":data="formCompanyData":value="formCompanyValue"labelWidth="70px"></v-form></div></bm-info-window></baidu-map>

更多属性配置请参照官方文档

vue-baidu-map官网https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map

快捷实现vue-baidu-map百度离线地图相关推荐

vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
vue百度离线地图v3.0---初始化地图
1. 百度离线文件百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器百度网盘下载:http ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
Vue-cli3实现web百度离线地图(v3.0)开发
需求实现基于Vue-cli3的web百度离线地图(v3.0)开发 Vue-cli3,目录如下,注意:需要把地图相关的文件放在public下,vue-cli2需要放在static下!!! 参考主要参 ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
百度离线地图示例之四：热力图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
百度离线地图示例之二：测距
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...

快捷实现vue-baidu-map百度离线地图