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 傅里叶变换是干嘛的： 傅里叶得到低频、高频信息，针对低频、高频处理能够实现不同的目的。 傅里叶过程是可逆的，图像经过傅里叶变换、逆傅里叶变换后，能够恢复到原始图像…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别：不同层级的事件处理 方…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知，帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量，能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度，还为机器人、医疗设备和制造业的智…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
全面解析数据库：从基础概念到前沿应用
在数字化时代，数据已成为企业和社会发展的核心资产，而数据库作为存储、管理和处理数据的关键工具，在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理，到社交网络的用户数据存储，再到金融行业的交易记录处理&a…...