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

1.下载自己想要的地图网片

(1)瓦片图下载
提取百度网盘中文件,然后运行exe文件,选择要下载的层级及地区即可

百度网盘链接:https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e
提取码:0q0e
(2)将瓦片图映射到网上
推荐使用nginx,我使用的是iis,为啥要映射到网上,是这样的官方的代码是js版的,我们要整vue版的,vue项目打包时会将所有文件进行打包,图片有很多很多,vue项目直接编译崩溃,所以为了开发方便,我们还是将瓦片图放置到服务器中

我就直接把ditu目录映射到了网上satellite文件夹与tiles_hybird文件夹中就是对应的地图瓦片

在这里插入图片描述
下面是我的映射到网上后访问图片资源的url地址形式,记住你的url地址下面代码中会用到
在这里插入图片描述

2.下拉vue项目进行修改(我整了一个测试的项目,画坐标,画线都有)

(1)git clone https://gitee.com/zhang-haojie-kongjian/baDuDiDuVue.git

(2)安装依赖,建议cnpm
在这里插入图片描述
(3)修改配置
public\static\map_load.js:这是配置地图瓦片位置的文件

在这里插入图片描述
其中tiles_path是刚刚你映射图片时的ip端口,tiles_dir的值是存放普通瓦片的目录名称其他的属性的作用同理

在这里插入图片描述
红色波浪线处代表要展示的地图类型,根据此值此项目会用到上面的bmapcfg中的对应类型的图片所在的目录地址,意思是红色波浪线处对应的地图瓦片必须得有,正如我的mapType的值是BMAP_HYBRID_MAP所以我映射到网上的图片的目录就是必须有bmapcfg中tiles_hybrid属性的值对应的目录。

在这里插入图片描述
(4)修改index.vue中的代码

initMap()是用来实现地图展示的方法,修改此方法为你的功能实现就可以了。

小妙招
(1)如果报错的话多半是路径问题,F12解决路径的报错就好了。
(2)配置瓦片的路径时一定要仔细
(3)有js文件尽量放在index.html中
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/220106.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数电笔记之寄存器

数电 1 数字电路基础 1.2 二进制数据表达 1.2.1 二进制简介 1.2.2 用二进制表达文字 常用的中文字符集:GBK,UTF8 1.2.3 用二进制表达图片 图片像素化,像素数字化 1.2.4 用二进制表达声音 1.2.5 用二进制表达视频 1.3 数字电路 1.3…

mysql中year函数有什么用

YEAR()函数用于提取日期或日期时间值中的年份。可以用于提取DATE、DATETIME或TIMESTAMP列中的年份。 SELECT YEAR(date_column) FROM table;# 提取字符串中的数据SELECT YEAR(2023-07-19) FROM table_name;

day70

今日回顾 session 中间件 auth session Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要有一种新的东西,它能支持更…

TsuKing: Coordinating DNS Resolvers and Queries into Potent DoS Amplifiers

目录 笔记后续的研究方向摘要引言之前的工作。我们的研究贡献 TsuKing: Coordinating DNS Resolvers and Queries into Potent DoS Amplifiers CCS 2023 笔记 本文介绍了一种名为 TsuKing 的新型 DNS 放大攻击。与以前利用单个DNS解析器的攻击不同,TsuKing协调多个…

MPC模型预测控制理论与实践

一、基本概念 最有控制的动机是在约束条件下达到最优的系统表现。 模型预测控制(MPC,Model Predictive Control)是通过模型来预测系统在某一未来时间段内的表现来进行优化控制,多用于数位控制,通常用离散型状态空间表…

树_二叉搜索树累加求和

//给出二叉 搜索 树的根节点,该树的节点值各不相同,请你将其转换为累加树(Greater Sum Tree),使每个节点 node 的新值等于原树中大于或等于 // node.val 的值之和。 // // 提醒一下,二叉搜索树满足下列约束…

9.Unity搭建HTTP服务器

搭建HTTP服务器的几种方式 //1.使用别人做好的HTTP服务器软件,一般作为资源服务器时使用该方式(学习阶段建议使用) //2.自己编写HTTP服务器应用程序,一般作为Web服务器 或者 短链接游戏服务器时 使用该方式 使用别人做好的HTTP服…

ROS-ROS通信机制-服务通信

文章目录 一、服务通信基本知识二、自定义srv三、C实现四、Python实现 一、服务通信基本知识 服务通信也是ROS中一种极其常用的通信模式,服务通信是基于请求响应模式的,是一种应答机制。也即: 一个节点A向另一个节点B发送请求,B接收处理请求…

通过断点调试解决node 运行js程序直接退出(没有任何报错提示)的问题

现象: node运行程序直接退出,但是从echo $?的返回值可以知道: 一定出现了错误,但是没有显示出来 解决办法: 1. 使用node --inspect-brk 启动程序 然后在浏览器访问chrome://inspect 然后点击inspect 进行单步调试 …

软件设计之桥接模式

实现茶水间:茶可以分红茶和绿茶,每种茶又可以分大杯和中杯,现在你是服务员需要计算茶水的价格。 package Bridge;public class BlackTea implements TeaKind{private float redTeaPrice 2.0f;Overridepublic float price() {return redTeaPr…

“快慢指针”思想在物理或者逻辑循环中的应用

1 基础概念 1.1 什么是物理循环和逻辑循环? 物理循环是指物理索引访问顺序上相邻,逻辑上也相邻,比如循环链表,逻辑循环则指物理的索引上不一定相邻 1.2 快慢指针本质上可以解决逻辑循环问题,而物理循环也属于逻辑循…

【java】toString() 导致的 StackOverflowError 异常

这是怎么导致的呢? A 类属性包含着 B 类的引用 B 类属性包含着 A 类的引用 代码大概就是这样的: Data public class User{public String name;public Dog dog; }Data public class Dog{public String name;public User user; }User user new User()…

面试前自测题,接口自动化测试过程中怎么处理接口依赖?

面试的时候经常会被问到在接口自动化测试过程中怎么处理接口依赖? 首先我们要搞清楚什么是接口依赖。 01、什么是接口依赖 接口依赖指的是,在接口测试的过程中一个接口的测试经常需要依赖另一个或多个接口成功请求后的返回数据。 那怎么处理呢&#…

机器学习---使用 EM 算法来进行高斯混合模型的聚类

1. 指定k个高斯分布參数 导包 import math import copy import numpy as np import matplotlib.pyplot as pltisdebug False 全局变量 isdebug可以用来控制是否打印调试信息。当 isdebug 为 True 时,代码中的一些调试信 息将被打印出来,方便进行调试…

Kubernetes(k8s)访问不了Pod服务

在k8s集群部署java web应用的服务时,浏览器访问不了pod服务或linux终端curl http://192.168.138.112:30000即curl http://ip地址:端口号失败,如下图: 在网上找了很久的答案,最后还是没解决,后来突然想起来一直是在k8…

7个简单技巧,让你从容应对压力面试!

01-什么是压力面试? 压力面试是指有意制造紧张,以了解求职者将如何面对工作压力的一种面试形式。 事实上,压力面试不是单独存在的一类面试,往往是穿插在面试过程中。 面试人通过提出不礼貌、冒犯的问题,或者用怀疑、…

JavaWeb(五)

一、JDBC概述 JDBC 就是使用Java语言操作关系型数据库的一套API 全称是Java DataBase Connectivity 表示Java数据库连接。 JDBC的本质是官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口,各个数据库厂商去实现这套接口&#xff0…

11、信息打点——红队工具篇FofaQuakeSuize水泽Arl灯塔

网络空间测绘引擎 Fofa Quake shodan Zoomeye 主要搜关联资产、特征资产、资产信息(在测绘引擎上直接搜IP,它会显示所有与该域名有关的信息。) fofa和Quake测绘引擎集成化工具:Finger 自动化信息收集项目 ARL灯塔 Suize水泽 …

编程语言分类

如果要将编程语言分成两大类,可以考虑以下分类方式: 编译型语言(Compiled Languages):这类语言在运行之前需要通过编译器将源代码转换为机器码或类似形式的可执行代码。编译型语言的特点包括: 需要显式的编…

二极管:TVS瞬态抑制二极管

一、什么是TVS二极管 TVS(Transient Voltage Suppressors),即瞬态电压抑制器,又称雪崩击穿二极管。 TVS二极管的符号如下图所示 什么是雪崩击穿 雪崩击穿是有必要了解一下的,不然后面还有齐纳击穿,搞不…