VUE 百度离线地图的下载与使用

最新推荐文章于 2024-06-04 14:56:11 发布

Liu_liu57

最新推荐文章于 2024-06-04 14:56:11 发布

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端小知识文章标签： vue 百度离线地图百度离线地图的使用百度离线地图的下载 vue 导入离线地图百度离线地图api

本文链接：https://blog.youkuaiyun.com/Liu_liu57/article/details/88395879

本文介绍了在Vue项目中如何使用百度离线地图，包括无水印瓦片图的下载和在Vue组件中的具体使用步骤，详细讲解了文件结构和代码实现，确保在Firefox、Chrome和IE浏览器上的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用百度离线地图做了一个项目，折磨了好久。在此分享给大家。

参考了这位大神的做法：https://blog.youkuaiyun.com/xfxf996/article/details/81225330

下载瓦片图

之前我下载的地图瓦片图都有水印。这个没有水印。链接: https://pan.baidu.com/s/1Y5NbWsyBwTCtJjX26sSSaA 提取码: 1s8z

演示demo链接: https://pan.baidu.com/s/1rk1k6BCpZK9CpJqHF-DApg 提取码: 2ciq

下载后的结构为：在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</ti

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Liu_liu57

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
10
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue百度地图开发-3 离线地图的下载

想去旅行的静静的博客

03-17

755

下载渠道：因为是第一次接触，所以对瓦片图的意义不是特别清楚，差了很多资料，大致意思是这样的：瓦片地图具有如下特点：参考链接作者：JasonJe 具有唯一的瓦片等级和瓦片坐标编号；分辨率为 256*256；瓦片等级越高，展示的地图信息约详尽，瓦片数量也越多；上一等级的一张瓦片地图可分割为下一等级的四张瓦片地图。参考文章：《国内主要地图瓦片坐标系定义及计算原理》我的理解是，一个地...

Vue-Leaflet地图组件开发（一）基础地图框架搭建与配置指南

最新发布

runepic的博客

06-02

639

本文介绍了使用Vue-Leaflet搭建基础地图框架的完整流程。首先讲解环境准备，包括安装Vue-Leaflet、Leaflet等核心依赖和CSS配置。然后详细说明基础地图组件的搭建，包括模板结构、地图容器样式和常见问题解决方案。重点解析了地图核心配置选项，如交互控制、UI设置和坐标系选择。最后展示了如何添加OSM和天地图等常用底图，并提供了完整的示例代码。

10 条评论您还未登录，请先登录后发表或查看评论

vue2实现百度地图离线（通过下载地图瓦片实现）

请叫我欧皇！的博客

06-04

3511

需求：因为需要部署到内网，只能使用离线地图，找了很多方法最终实现，文章包含如下1.使用工具下载所需地区瓦片2.使用echarts实现地图3.断网测试4.图片太多打包太大解决方法完整代码以及需要的工具都放在最后了~

VUE 离线地图的下载与使用

08-11

VUE 离线地图的下载与使用，下载瓦片离线使用

vue中引入百度离线地图所需文件

04-24

主要是为了在vue中引入百度离线地图，而这几个文件是不可或缺的，（压缩包还一个文件可以去我下面这个博客去下载）； vue引入百度离线地图教程：https://blog.youkuaiyun.com/qq_36727756/article/details/89491444

vue使用百度离线地图资源

04-25

vue使用百度地图离线资源该文件内容须放于项目public...使用请参考博主博客：vue使用百度地图----离线地图 https://blog.youkuaiyun.com/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F_0331

离线vue百度地图，实现简单了热图与百度地图显示

06-08

vue 离线百度地图加瓦片在线器，供大家学习，使用vue2，百度v3，也制作了热力图，瓦片不全，大家可也根据自身需要下载瓦片。

VUE 百度离线地图的下载与使用-附件资源

03-05

VUE 百度离线地图的下载与使用-附件资源

vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）

热门推荐

路虽远行则将至，事虽难做则必成。

12-21

1万+

最近发现很多小伙伴都在问内网怎么使用百度地图，或者是断网情况下能使用百度地图吗后面经过一番研究，主要难点是，正常情况下我们是访问公网百度图片，数据，才能使用内网时访问不了百度地图资源时就会使用不了，如果我们能把我们需要数据下载到本地，自己访问自己，那这个问题就可以解决我们可以使用地图下载器下载我们需要的瓦片图数据，使用serve运行起来，这样内网和断网就可以使用了遗憾的是只能基本展示，定位。不能使用百度地图api-类，因为百度地图类和api都是通过http请求来实现的。

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.提供了四川和贵州的离线瓦片百度云数据，可以下载下来之后，实验一下离线地图效果

最新百度地图离线API

01-30

百度地图JavaScript离线API开发demo。本资源主要展示了如何加载地图类型，圈出自定义区域，多个标注等，功能均在离线模式下开发，测试请断开网络。

Vue集成Bmap离线地图-打dist包的api.js资源

04-22

Vue集成Bmap离线地图-打dist包问题解决，详见：https://blog.youkuaiyun.com/yc199505/article/details/89448659

vue-world-map:Vue JS组件，用于在世界地图上显示动态数据

05-08

不再保持此状态，请不要打开问题或PR。 Vue世界地图 Vue JS组件，用于在世界地图上显示动态数据。来自地图安装使用npm install vue-world-map通过npm install vue-world-map 用法此组件对于为各个国家/地区创建热图最有用。并将根据通过的道具为国家/地区上色。该组件需要将countryData传递给它，这是一个格式如下的JS对象。 { US : 100 , CA : 120 , UK : 400 , } 其中键是国家/地区的，值是与之关联的数字值。原料药道具描述可选的 countryData 有关详细信息，请参见上面的使用部分。不低色值较低的国家/地区将使用此颜色更强烈地着色是的高色彩值较高的国家/地区将使用此颜色更强烈地着色是的 defaultCountryFillColor 没有

vue-baidu-map--------vue百度地图插件

qq_42925191的博客

08-21

5460

安装 npm i --save vue-baidu-map 引入 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */ ak: 'YOUR_APP_KEY' }...

离线环境下使用百度地图（vue版）（展示自己的地图瓦片）3.0版本api

weixin_47615289的博客

12-05

1756

代表要展示的地图类型，根据此值此项目会用到上面的bmapcfg中的对应类型的图片所在的目录地址，意思是红色波浪线处对应的地图瓦片必须得有,正如我的mapType的值是BMAP_HYBRID_MAP所以我映射到网上的图片的目录就是必须有bmapcfg中tiles_hybrid属性的值对应的目录。其中tiles_path是刚刚你映射图片时的ip端口，tiles_dir的值是存放普通瓦片的目录名称其他的属性的作用。下面是我的映射到网上后访问图片资源的url地址形式，记住你的url地址下面代码中会用到。

vue中使用百度地图为啥是空白_景观区位分析图|高清地图（矢量版）下载方法（1分钟学会）...

weixin_39663360的博客

12-13

1086

公众号：XIN的景观图志补充:【关于百度地图截获器闪退问题】百度地图截获器教程网址（B站）：https://b23.tv/av81121854【闪退/下载地图不全/空白/任何问题】可以试一下以下几种方法：1.关闭杀毒软件运行；2.用火狐浏览器，并且运行期间除了浏览器无其他页面打开。3.一次有问题不要紧，多尝试几次看看。4.下载级别设置小一点（太大也容易有问题）温馨提示：此软件越来越不稳定，很有可能...

VUE使用百度地图(vue-baidu-map)

songdancer的博客

11-04

3081

vue使用百度地图

Vue中使用百度离线地图的核心文件指南

提供的博客链接详细地讲述了如何在Vue项目中引入和使用百度离线地图的过程，包括了可能遇到的问题和解决方案。在实际操作过程中，遇到疑惑时可参考博客中的内容，对照代码和步骤进行排查和解决。通过以上知识点的...