Vue集成Bmap离线地图-打dist包问题解决

继续我上一篇博客：https://blog.csdn.net/yc199505/article/details/88846596
在以npm run dev的形式运行时并不会有问题。

最近应客户要求，需要给打包成dist静态访问的形式，但是通过打dist包的时候，由于资源路径变化了，会导致地图的功能资源文件加载异常等问题。

问题的根本原因：

bmap.js的加载时是以静态资源的形式加载的，根本原因在于，如果将庞大的瓦片打包到vue项目中，会耗费巨量的时间。所以我无法在bmap.js中写相对路径或者写require的形式去获取地图资源。
我在上篇博客的资源包中的路径是从绝对路径开始写起的，如地图瓦片路径：maptitleUrl + “/17/23232.png”。maptitleUrl = “/static/BMap/maptitle” 在以服务器运行的时候,maptitleUrl 等价为"localhost:port/static/BMap/maptitle"，但是在打了dist包后，那么如果直接运行在linux或者windows，那么maptitleUrl等价直接指向磁盘的根目录开始即：D:/static/BMap/maptitle
对应有jsUrl，libUrl，imageUrl等，在getmodule.js中同理，注，此处的变量简称，只是代称，在bmap.js中我直接替换的路径，并没有抽象出来。

知道问题的根源了，那么就是改api的问题了，api我改好了，在此下载。

使用方法：
js/images等路径如上篇博客所示路径
在main.js中

import "../static/BMap/js/bmap_pack.js";

然后打dist包

Vue集成Bmap离线地图-打dist包问题解决相关推荐

Vue集成Bmap离线地图
Vue项目的Bmap目录结构如下: 支持Vue该目录的Bmap的api,我取名为bmap.js如下位置下载: 从此处下载 main.js中引入api.js: import "../stati ...
vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
基于Vue的高德离线地图开发--省市县
基于Vue的高德离线地图离线地图优势环境需要下载地图离线资源包本项目功能具体代码离线地图优势高德地图接口,个人每天免费调用次数为500次,渲染速度受网络波动影响,又或许项目部署在局域网, ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
Bmap离线地图实现原理简介
侵权说明: 如文章内容有侵权行为,请联系本人告知,本人会尽快删除修改,避免扩大影响. Bmap说明: Bmap由北京百度网讯科技有限公司提供技术支持为用户提供包括智能路线规划.智能导航(驾车.步行.骑 ...
在Vue中Bigemap离线地图的基本使用
在最近的一个项目中由于需要使用到离线地图,在网上搜索发现了bigemap这一款能够简单部署离线地图的软件,在这里给大家演示一下我的用法. 软件使用离线地图服务器_快速搭建离线地图服务_离线地图软件开 ...
vue集成echarts map3d地图（省市下穿）
最近项目中需要集成echarts中的map3D地图,开发过程中遇到过不少问题,这里mark下,有遇到相应问题的伙伴欢迎一起交流相关源码下载 1.世界地图.js,中国地图.js,中国各省份地图.js ...
vue 用BMap百度地图即时搜索功能
功能如下: 搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前代码: 首先去百度开发者申请一个key 然后将key引入到项目的 i ...

Vue集成Bmap离线地图-打dist包问题解决

Vue集成Bmap离线地图-打dist包问题解决相关推荐

最新文章

热门文章