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 傅里叶变换是干嘛的： 傅里叶得到低频、高频信息，针对低频、高频处理能够实现不同的目的。 傅里叶过程是可逆的，图像经过傅里叶变换、逆傅里叶变换后，能够恢复到原始图像…...
HCIP---VRRP实验
网络拓扑：分析：1.pc1和pc2处于不同vlan，所以处于不同网段。2.sw1为vlan10即pc1的网关，sw2为vlan20即pc2的网关，所以要使用vlanif接口。3.实现负载分担效果，使用pc1流量主要从sw1过，如果sw1故障或…...
OpenMatrix 架构解析：基于 Harness 思想的 AI 任务编排系统
引言：AI 编码的信任危机 AI 编码工具已经非常强大，但用户仍然不敢完全信任。为什么？ 第一层：AI 补全代码（Copilot）→ 解决「写」的问题 第二层：AI 对话编程（Claude Code࿰…...
终极字体优化指南：让你的home55个人主页加载速度提升50%的实用技巧
终极字体优化指南：让你的home55个人主页加载速度提升50%的实用技巧 【免费下载链接】home- 个人主页，我的个人主页，个人主页源码，主页模板，homepage 项目地址: https://gitcode.com/gh_mirrors/home55/home- 在…...
手把手教你用Qwen-Image-Edit-2511：小白也能玩的AI换装神器
手把手教你用Qwen-Image-Edit-2511：小白也能玩的AI换装神器 1. 快速认识AI换装神器 最近发现一个特别有意思的工具，能让普通人也能轻松玩转AI换装。这个叫Qwen-Image-Edit-2511的AI模型，是之前2509版本的升级版，主要解决了几个关…...
浅谈MIKE前处理中投影坐标处理问题
MIKE 中投影坐标一直是个问题，尤其对 2d 里的科氏力影响很大， 由于我们现获取基础资料都是 CAD 格式，在 GIS 里转 shp 后我们会发现很多是地方坐标，对于这种情况，小编也是无能无力，只有想办法 让 CAD 提供方…...
.NET 磁盘BitLocker加密-技术选型忠
在之前的文章中，我们花了大量的篇幅，从记录后端pod真实ip开始说起，然后引入envoy，再解决了各种各样的需求：配置自动重载、流量劫持、sidecar自动注入，到envoy的各种能力：熔断、流控、分流、透明…...
彻底吃透哨兵值：从底层逻辑到自定义设计（附原创值域理论）
彻底吃透哨兵值：从底层逻辑到自定义设计（附原创值域理论） 在编程中，哨兵值（Sentinel Value）是一个高频出现但容易被误解的概念。很多人只会死记硬背“哨兵值是用来终止循环的特殊值”，却不懂其底…...
AXI总线协议---关键信号时序解析与实战应用
1. AXI总线协议基础与核心信号解析 AXI（Advanced eXtensible Interface）总线协议是ARM公司推出的高性能片上总线标准，广泛应用于现代SoC设计和FPGA开发中。我第一次接触AXI是在一个图像处理项目里，当时为了调试DMA传输问题&#x…...
龙虾白嫖指南，请查收~何
1. 什么是 Apache SeaTunnel？ Apache SeaTunnel 是一个非常易于使用、高性能、支持实时流式和离线批处理的海量数据集成平台。它的目标是解决常见的数据集成问题，如数据源多样性、同步场景复杂性以及资源消耗高的问题。 核心特性 丰富的数据源支持&#…...
洛雪音乐助手：免费开源的多平台音乐播放器完全指南
洛雪音乐助手：免费开源的多平台音乐播放器完全指南 【免费下载链接】lx-music-desktop 一个基于 Electron 的音乐软件 项目地址: https://gitcode.com/GitHub_Trending/lx/lx-music-desktop 洛雪音乐助手是一款基于Electron和Vue 3开发的免费开源跨平台音乐播…...