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 傅里叶变换是干嘛的： 傅里叶得到低频、高频信息，针对低频、高频处理能够实现不同的目的。 傅里叶过程是可逆的，图像经过傅里叶变换、逆傅里叶变换后，能够恢复到原始图像…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
字符串哈希+KMP
P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...