vue项目 百度地图离线开发

已于 2023-08-25 10:42:43 修改
阅读量1.8k 收藏 5
点赞数 4
分类专栏： 百度地图离线开发 文章标签： vue.js javascript
于 2023-01-06 14:47:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53513969/article/details/128577624
版权

公司项目部署的服务器，不能访问外网，所以使用离线地图

实现离线开发最主要最重要的就是 瓦片的下载和相关的js文件

具体实现分三大步骤，网盘中map压缩包中的js文件已做处理，按照以下步骤即可实现初始化地图

第一步

下载压缩包 分享链接 百度网盘 请输入提取码 提取码：ibaw

第二步

解压全能下载器地图 打开imaps.exe应用下载需要的瓦片数据

首次进入，需要配置地图密钥 没有的申请百度地图API密钥 保存之后如果地图不显示，重启应用

下载瓦片数据 主要是这三步骤 其他设置自行摸索

下载完的数据格式 如图

第三步

解压map.zip

把下载好的瓦片目录数据 放到tiles目录下

说明： 如果瓦片数据过大，建议后台做neginx代理 然后修改baidumap_offline_v2_load.js文件下的

'tiles_dir': ‘后台地址’即可

创建map.html文件 引入相关文件 注意 文件顺序不能错 不然会报错

map.html文件  初始化地图

然后 组件中iframe引入即可

茶杯茶凉
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
百度地图api离线开发包
04-26
本离线开发包，支持百度地图离线开发。用于无网络环境下的百度地图二次开发。 包含以下文件： 1，基础API：apiv1.3.min.js ，有注释可参考； 2，基础CSS: bmap.css ; 3,依赖文件：map,oppc,tile,control,marker； 4，瓦片图：maptile； 5，例子：demo.html；用火狐和chrome可直接打开，在IE下还有些问题。 多多交流，一起努力！
vue-baidu-map离线地图配置详解
热门推荐
Zwain_M的博客
04-09 1万+
最近有一个项目需要用到地图来展示位置并进行数据交互，用vue-baidu-map实现出来后，又告诉我他们没有外网，查了各种资料文档，却发现导入百度js的api的方式，BUG很多，只好还是使用vue-baidu-map的组件来做能更好的满足需求，于是又开始漫长的找源码，花了一天时间，找到了可以直接在联网基础上实现本地获取资源的方式。 1.下载百度api的js代码 访问地址 http://api.map.baidu.com/getscript?v=3.0&ak= 你的百度地图ak密钥 &ser.
vue项目中使用百度离线地图（最新全面爬坑版）
p_5050的博客
03-14 1万+
最新最全的爬坑版 - 在vue中使用百度离线地图
Vue利用百度地图画圆并且获取圆心坐标和半径
F1520080的博客
03-29 739
然后就是画圆了，这个东西不好整，官网给的demo就是单纯的画一个圆，没有说怎么拿到中心点坐标和半径，尽管给你展示出来了，但好像没有给提供接口拿数据，也是做了很多的准备，查阅了很多的资料才整理出来一个小的demo，但是有瑕疵，一会再说问题出在哪里。好了，按照上面的样子，百度地图就引进来了，但是哈，不建议这样用，用插件就可以，特别好，但是呢，因为这个项目需求不能使用插件，因为插件不支持画圆获取坐标的功能，只能这样凑合着用。这个东西不好整，既要使用Vue接入百度地图，又要画圆。就可以了，就像上面一样。
vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）
路虽远行则将至，事虽难做则必成。
12-21 3879
最近发现很多小伙伴都在问内网怎么使用百度地图，或者是断网情况下能使用百度地图吗后面经过一番研究，主要难点是，正常情况下我们是访问公网百度图片，数据，才能使用内网时访问不了百度地图资源时就会使用不了，如果我们能把我们需要数据下载到本地，自己访问自己，那这个问题就可以解决我们可以使用地图下载器下载我们需要的瓦片图数据，使用serve运行起来，这样内网和断网就可以使用了遗憾的是只能基本展示，定位。不能使用百度地图api-类，因为百度地图类和api都是通过http请求来实现的。
【前端小技能】Vue集成百度离线地图
球球博客
10-12 1万+
vue项目开发在内网中使用百度离线地图，
离线vue百度地图，实现简单了热图与百度地图显示
06-08
vue 离线百度地图加瓦片在线器，供大家学习，使用vue2，百度v3，也制作了热力图，瓦片不全，大家可也根据自身需要下载瓦片。
vue项目实现百度离线地图开发
weixin_39277183的博客
10-26 9518
vue+百度离线地图开发（布标记点，标记点聚合，标记点详情，标记点轨迹）
vue项目加载离线地图
Moca_H的博客
01-13 2583
在项目中遇到需要离线使用地图的时候，可以参考本文的使用方式
Vue中加载天地图的离线地图
前端-尔嵘
06-17 3297
在上述代码中，我们引入了Leaflet.js和天地图离线地图插件的依赖。在initMap方法中，我们创建了一个地图实例，并使用L.tileLayer.wmts方法来添加天地图离线地图瓦片图层。请将'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png'替换为实际的离线瓦片文件的路径。要在Vue中加载天地图的离线地图，你可以使用L.TileLayer.WMTS插件来实现。
Vue离线内网环境使用百度地图开发
guizhou666的博客
03-22 2017
vue使用离线百度地图（含热力图）
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F_0331
vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据
02-23
1.vue-baidu-map在线地图代码不用改动，只用按照文档添加baidu-api.js和baidu-init.js，并在vue依赖包 node_modules文件找到，修改vue-baidu-map的 index.js文件 就能完成离线配置 2.jar包可以免费下载百度地图瓦片数据 3.瓦片数据如果下载层级过大，建议放在nginx代理，文档也是以nginx代理的方式去实现离线效果 4.2022-12-05日更新，可能会出现项目实际部署之后，地图无法拖拽的问题，新添加了8个js文件，并修改了一下baidu-api.js代码引入这八个js(直接搜索http://127.0.0.1/js换成你本地路径就行) 5.提供了四川和贵州的离线瓦片百度云数据，可以下载下来之后，实验一下离线地图效果
VUE 离线地图的下载与使用
08-11
VUE 离线地图的下载与使用，下载瓦片离线使用
vue中引入百度离线地图所需文件
04-24
主要是为了在vue中引入百度离线地图，而这几个文件是不可或缺的，（压缩包还一个文件可以去我下面这个博客去下载）； vue引入百度离线地图教程：https://blog.csdn.net/qq_36727756/article/details/89491444
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 682
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 299
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 323
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 383
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue项目实现百度离线地图开发没有网络
04-07
Vue项目实现百度离线地图开发，可以按照以下步骤进行： 1. 下载百度地图离线包 首先需要下载百度地图离线包，可以在百度地图开放平台上下载。下载后将离线包解压到项目的static目录下。 2. 引入百度地图API 在Vue项目中，可以在index.html中引入百度地图API的JS文件： ``` <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> ``` 其中，AK是在百度地图开放平台申请的API Key。 3. 初始化地图 在Vue项目中，可以在mounted()函数中初始化地图： ``` mounted() { let map = new BMap.Map("mapContainer"); // 创建地图实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 启用滚轮放大缩小 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件 } ``` 4. 加载离线地图 在初始化地图之后，可以通过设置地图的样式来加载离线地图： ``` map.setMapStyle({styleJson: []}); // 加载离线地图 ``` 其中，styleJson是离线地图的样式json文件，可以在离线包中找到。 5. 打包部署 最后，将Vue项目打包部署到服务器上即可。需要注意的是，由于离线地图文件较大，需要在服务器上配置缓存等策略，以提高地图加载速度。 以上就是Vue项目实现百度离线地图开发的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

茶杯茶凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值