VUE3 显示Echarts百度地图
本次实现最终效果
技术基础以及环境要求
vue3 + echarts + 百度地图API
要求1：
VUE3 环境搭建：https://blog.csdn.net/LQ_001/article/details/136293795
要求2：
VUE3 + echatrs 环境搭建:https://blog.csdn.net/LQ_001/article/details/136308234?spm=1001.2014.3001.5502
要求3：
百度地图API申请地址：https://lbsyun.baidu.com/apiconsole/authflow/authresult
VUE3实现地图
1 百度地图API
申请百度地图开发者成功以后，创建一个API。百度地图API创建过程参考这里：在vue3中如何使用百度地图API
2 VUE3代码配置项
首先，再文件 public\index.html 中，插入以下代码：
<head>。。。。。。。。。<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=API号码"></script><style type="text/css">.BMap_cpyCtrl {display: none;}</style><style type="text/css">.anchorBL{display:none;}</style>
</head>
上面代码，第一句是加 API的，第二三句是消除百度地图水印的。百度水印如下图：
import 'echarts/extension/bmap/bmap';
3 VUE3 引入 echarts 地图代码
新建一个 VUE3 布局文件模板，VUE3 代码如下：
<template><div ref="myChart" id="mychart"></div>
</template><script>
import * as echarts from 'echarts';
export default {name: 'MyChart',mounted() {let myChart = echarts.init(this.$refs.myChart,'dark');let option = {};myChart.setOption(option);},
};
</script><style>
#mychart {width: 500px;height: 500px;border: 4px solid #89a2f5;
}
</style>
打开 echarts 地图样式代码，本例子使用echarts PM2.5例子，如图：
将 echarts 左边的代码，按照如下拷贝进来：
<template><div ref="myChart" id="mychart"></div>
</template><script>
import * as echarts from 'echarts';
export default {name: 'MyChart',mounted() {let myChart = echarts.init(this.$refs.myChart,'dark');const data = [拷贝]const geoCoordMap = {拷贝}let option = { 拷贝};myChart.setOption(option);},
};
</script><style>
#mychart {width: 500px;height: 500px;border: 4px solid #89a2f5;
}
</style>
不出意外，将上面三处拷贝进来就能显示地图了。
相关文章：
VUE3 显示Echarts百度地图
本次实现最终效果 技术基础以及环境要求 vue3 echarts 百度地图API 要求1： VUE3 环境搭建：https://blog.csdn.net/LQ_001/article/details/136293795 要求2： VUE3 echatrs 环境搭建:https://blog.csdn.net/LQ_001/article/details/1363…...
FFmpeg将视频包AVPacket通过视频流方式写入本地文件
1.写视频头 void writeVideoHeader(const char* videoFileName){int r avformat_alloc_output_context2(&pFormatCtx, nullptr, nullptr,videoFileName);if(r < 0){qDebug()<<"Error: avformat_alloc_output_context2: "<<av_err2str(r);return;…...
C语言连接【MySQL】
稍等更新图片。。。。 文章目录 安装 MySQL 库连接 MySQLMYSQL 类创建 MySQL 对象连接数据库关闭数据库连接示例 发送命令设置编码格式插入、删除或修改记录查询记录示例 参考资料 安装 MySQL 库 在 CentOS7 下，使用命令安装 MySQL： yum install mysq…...
_note_09
1.说一说类加载的过程 加载（Loading） -> 验证（Verification） -> 准备（Preparation） -> 解析（Resolution） -> 初始化（Initialization）类的加载是…...
是否可以在HTTP中缓存POST方法
如果您想知道是否可以缓存post请求，并尝试研究该问题的答案，那么您很可能不会成功。当搜索“缓存post请求”时，第一个结果是这个StackOverflow问题。 答案是令人困惑的，包括缓存应该如何工作，缓存如何根据RFC工作&…...
Xilinx 7系列FPGA配置（ug470）
Xilinx 7系列FPGA配置（ug470） 配置模式串行配置模式接口从-连接方式主-连接方式串行菊花链（非同时配置）串行配置（同时配置）时序 主SPI配置模式SPIx1/x2 连接图SPIx1模式时序SPIx4 连接图SPI操作指令操作fla…...
3分钟开通GPT-4
AI从前年12月份到现在已经伴随我们一年多了，还有很多小伙伴不会开通，其实开通很简单，环境需要自己搞定，升级的话就需要一张visa卡，办理visa卡就可以直接升级chatgptPLSU 一、虚拟卡支付 这种方式的优点是操作简单&…...
Easticsearch性能优化之索引优化
Easticsearch性能优化之索引优化 一、合理的索引设计二、合理的分片和副本三、合理的索引设置 对于性能优化，Elasticsearch（以下简称ES）的索引优化是提高性能的关键因素之一。合理的设计索引，合理的分片和副本以及合理的缓存设置等…...
安装mysql-8.0.30-winx64(windows 64位)
1.下载 1.1下载地址：https://dev.mysql.com/downloads/mysql/ 2 .下载后解压缩目标文件 2.1之后在根目录下新建my.ini文件,并创建文件夹data （新解压的文件没有my.ini文件，需自行创建 复制以下代码到my.ini文件 以下代码除安装目录和数据的…...
ios xcode 15 PrivacyInfo.xcprivacy 隐私清单
1.需要升级mac os系统到13 兼容 xcode 15.1 2.升级mac os系统到14 兼容 xcode 15.3 3.选择 New File 4.直接搜索 privacy 能看到有个App Privacy 5.右击Add Row 7.直接选 Label Types 8.选中继续添加就能添加你的隐私清单了 苹果官网文档Describing data use in privacy man…...
【物联网】-智能社会的分类
万物感知 感知物理世界，变成数字信号 （温度、空间、触觉、嗅觉、听觉、视觉） 万物互联 将数据变成online，使智能化 （宽联接、广联接、多联接和深联接） 万物智能 基于大数据和人工智能的应用 &#…...
Django高级之-cookie-session-token
Django高级之-cookie-session-token 发展史 1、很久很久以前，Web 基本上就是文档的浏览而已， 既然是浏览，作为服务器， 不需要记录谁在某一段时间里都浏览了什么文档，每次请求都是一个新的HTTP协议， 就是请…...
【Prometheus】k8s集群部署node-exporter
目录 一、概述 1.1 prometheus简介 1.2 prometheus架构图 1.3 Exporter介绍 1.4 监控指标 1.5 参数定义 1.6 默认启用的参数 1.7 prometheus如何收集k8s/服务的–三种方式收集 二、安装node-exporter组件 【Prometheus】概念和工作原理介绍-CSDN博客 【云原生】ku…...
2024年k8s最新版本安装教程
k8s安装教程 1 k8s介绍2 环境搭建2.1 主机准备2.2 主机初始化2.2.1 安装wget2.2.2 更换yum源2.2.3 常用软件安装2.2.4 关闭防火墙2.2.5 关闭selinux2.2.6 关闭 swap2.2.7 同步时间2.2.8 修改Linux内核参数2.2.9 配置ipvs功能 2.3 容器安装2.3.1 设置软件yum源2.3.2 安装docker软…...
Gin 获取请求参数
POST 请求参数 Gin 获取Post请求URL参数有三种方式 func (c *Context) PostForm(key string) string func (c *Context) DefaultPostForm(key, defaultValue string) string func (c *Context) GetPostForm(key string) (string, bool)大多数情况下使用的是application/x-www…...
安卓 Kotlin 面试题 31-40
🔥 31、简述Kotlin 中的内联类，我们什么时候需要？🔥 有时，业务逻辑需要围绕某种类型创建包装器。 但是，由于额外的堆分配，它会引入运行时开销。 此外，如果包装的类型是原始类型&…...
【洛谷千题详解】P1613 跑路
目录 题目总览 题目描述 输入格式 输出格式 思路分析 AC代码 题目总览 题目描述 小 A 的工作不仅繁琐，更有苛刻的规定，要求小 A 每天早上在 6:00 之前到达公司，否则这个月工资清零。可是小 A 偏偏又有赖床的坏毛病。于是为了保住自己的…...
如何定义resultType和resultMap，它们之间的区别是什么？解释一下＜parameterType＞的作用和用法。
在MyBatis中，resultType和resultMap都用于将数据库查询结果映射到Java对象，但它们在使用方式和灵活性上有一些区别。 resultType resultType是一个简单的类型别名，它用于指定查询结果应该映射到的Java类型。当数据库表中的列名和Java对象的属…...
Docker：部署微服务集群
1. 部署微服务集群 实现思路： ① 查看课前资料提供的cloud-demo文件夹，里面已经编写好了docker-compose文件 ② 修改自己的cloud-demo项目，将数据库、nacos地址都命名为docker-compose中的服务名 ③ 使用maven打包工具，将项目…...
傅里叶变换pytorch使用
参考视频：1 傅里叶变换原理_哔哩哔哩_bilibili 傅里叶变换是干嘛的： 傅里叶得到低频、高频信息，针对低频、高频处理能够实现不同的目的。 傅里叶过程是可逆的，图像经过傅里叶变换、逆傅里叶变换后，能够恢复到原始图像…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...