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

最新推荐文章于 2023-12-21 21:39:33 发布

Liu_liu57

最新推荐文章于 2023-12-21 21:39:33 发布

阅读量7k

点赞数 2

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

本文链接：https://blog.csdn.net/Liu_liu57/article/details/88395879

版权

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

摘要由CSDN通过智能技术生成

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

参考了这位大神的做法：https://blog.csdn.net/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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Liu_liu57

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
10
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

想去旅行的静静的博客

03-17

647

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

Vue + 天地图（离线加载）

最新发布

Java 璐到底

08-01

1079

vue实现天地图离线加载

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

VUE 离线地图的下载与使用

08-11

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

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

04-24

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

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

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

12-21

8063

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

vue使用百度离线地图资源

04-25

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

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

06-08

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

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

03-05

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

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.csdn.net/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

5410

安装 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中使用百度地图为啥是空白_景观区位分析图|高清地图（矢量版）下载方法（1分钟学会）...

weixin_39663360的博客

12-13

1016

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

在Vue中集成百度离线地图，需要下载离线地图瓦楞png图片

huo611的博客

05-26

177

在Vue中集成百度离线地图http://jstopo.top/jsTopo/#/about

Vue集成Bmap离线地图

忍法阡陌的博客

03-27

3749

Vue项目的Bmap目录结构如下：支持Vue该目录的Bmap的api，我取名为bmap.js如下位置下载： main.js中引入api.js： import "../static/BMap/js/bmap.js"; 使用方式：在.vue页面中的<script></script>内直接： var map = new BMap.Map(mapId);//...

vue 百度离线地图

08-22

对于Vue使用百度离线地图的需求，可以按照以下步骤进行操作： 1. 首先，需要下载并安装地图加载器，并通过加载器下载所需的地图瓦片。可以将下载的瓦片地图放置在项目的static/map/tiles目录下。请确保下载的瓦片地图包含所需的地图级别。 2. 接下来，需要在Vue项目中引入百度地图的相关依赖。可以通过npm或者yarn安装vue-baidu-map依赖，并在项目的main.js文件中进行引入。具体的引入方式可以参考vue-baidu-map官方文档。 3. 在使用离线地图之前，需要确保地图瓦片的路径配置正确。注意，路径配置错误可能会导致地图加载失败。请仔细检查路径配置，确保js可以正确加载到地图瓦片。 4. 在项目中准备好地图容器，可以使用一个div元素作为地图的容器，在Vue组件中进行定义和使用。通过以上步骤，你就可以在Vue项目中使用百度离线地图了。请注意，在实际开发过程中可能会遇到各种问题，可以参考一些博文或者开发者的经验进行解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue项目中使用百度离线地图（最新全面爬坑版）](https://blog.csdn.net/p_5050/article/details/123261394)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【前端小技能】Vue集成百度离线地图](https://blog.csdn.net/qiuqiu1628480502/article/details/127279706)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]