当前位置： 首页 > news >正文

使用react的ant-design-pro框架写一个地图组件，可以搜索地图，可以点击地图获取点击的位置及经纬度

news 来源：原创 2025/7/15 17:34:08

首先，先创建一个地图页面，用于显示地图组件，我是在pages文件中创建了一个mapSearch组件。
然后在routes.ts中注册页面。

 {path: '/mapSearch',name: 'mapSearch',icon: 'smile',component: './mapSearch',},

第三步就是使用高德地图来创建地图。
关键步骤：

1. 初始化状态和引用

  • 使用了 useRef 和 useState 钩子初始化了一些状态：
    • mapContainerRef: 引用地图容器，用于在页面中渲染地图。
    • mapRef: 引用地图实例和标记，用于在后续操作中修改地图或标记。
    • geocoder: 用于逆地理编码，转换坐标到实际地址。
    • mapLoaded: 用于标记地图是否加载完成。
    • placeSearchRef: 用于搜索地址的插件实例。
    • latitude 和 longitude: 存储当前地图中心的纬度和经度。
    • form: Ant Design 的表单实例，用于表单的操作和数据绑定。

2. 加载高德地图 API

  • 在 useEffect 中加载高德地图 API：
    • 通过判断 window.AMap 是否已加载，如果已经加载则直接初始化相关插件（AMap.PlaceSearch 和 AMap.Geocoder），并将它们存储在 placeSearchRef 和 geocoder 状态中。
    • 如果 window.AMap 未加载，动态加载地图脚本，并在脚本加载完成后初始化插件。

3. 地图初始化和点击事件

  • 在另一个 useEffect 中初始化地图：
    • new window.AMap.Map: 创建并渲染地图实例。
    • new window.AMap.Marker: 创建一个标记点，显示在地图上，标记当前的位置（默认位置为北京的经纬度）。
    • 监听地图的点击事件 (map.on('click'))，用户点击地图时会更新标记位置和地图中心，同时更新表单中的坐标。
    • 使用 geocoder.getAddress 获取逆地理编码信息，填充地址到表单中。

4. 地址搜索功能

  • handleSearch：当用户在输入框中输入地址并点击搜索时，执行以下操作：
    • 获取用户输入的地址值。
    • 使用 placeSearchRef.search 进行地址搜索，返回结果后获取第一个地点（POI）的坐标。
    • 更新地图和标记的位置，并使用逆地理编码获取该地点的完整地址，更新到表单中。

5. 表单项

  • 在页面中渲染了一个表单：
    • 地址搜索框 (<Input.Search />)：允许用户输入地址并点击搜索。
    • 经纬度输入框：用户可以直接输入经纬度来定位地图，输入后会更新地图的中心点和标记位置。

6. 地图渲染

  • mapContainerRef：用来显示地图的容器。地图会渲染在这里，容器的大小和样式由 style 属性控制。

代码如下：

import React from 'react';
import { useEffect, useState, useRef } from 'react';
import { message, Input } from 'antd';
import { Form } from 'antd';
// 地图页面 搜索地图的组件
const mapSearch: React.FC = () => {const mapContainerRef = useRef<HTMLDivElement>(null);const mapRef = useRef<any>(null);const [geocoder, setGeocoder] = useState<any>(null);const [mapLoaded, setMapLoaded] = useState(false);const [placeSearchRef, setPlaceSearchRef] = useState<any>(null);const [latitude, setLatitude] = useState<number>(39.9042); // 默认纬度：北京const [longitude, setLongitude] = useState<number>(116.4074); // 默认经度：北京const [form] = Form.useForm();// 加载高德地图 APIuseEffect(() => {window._AMapSecurityConfig = { securityJsCode: '填写你的密钥' };if (window.AMap) {setMapLoaded(true);window.AMap.plugin(['AMap.PlaceSearch', 'AMap.Geocoder'], () => {setPlaceSearchRef(new window.AMap.PlaceSearch({pageSize: 5,city: '全国',}),);const geo = new window.AMap.Geocoder({radius: 1000, // 查询半径，单位：米extensions: 'all', // 返回更多详情});setGeocoder(geo);});} else {const script = document.createElement('script');script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=填写你的key';script.async = true;script.onload = () => {setMapLoaded(true);window.AMap.plugin(['AMap.PlaceSearch', 'AMap.Geocoder'], () => {setPlaceSearchRef(new window.AMap.PlaceSearch({pageSize: 5,city: '全国',}),);const geo = new window.AMap.Geocoder({radius: 1000,extensions: 'all',});setGeocoder(geo);});};script.onerror = () => {message.error('高德地图 API 加载失败');};document.body.appendChild(script);return () => {document.body.removeChild(script);};}}, []);// 初始化或更新地图useEffect(() => {if (mapLoaded && mapContainerRef.current) {const map = new window.AMap.Map(mapContainerRef.current, {center: [longitude, latitude], // 定位到北京zoom: 15,});const marker = new window.AMap.Marker({map,position: [longitude, latitude],});// 在初始化地图的useEffect中修改点击事件处理map.on('click', (e: any) => {const { lat, lng } = e.lnglat;// 更新marker与中心marker.setPosition([lng, lat]);map.setCenter([lng, lat]);// 更新状态和表单setLatitude(lat);setLongitude(lng);// 逆地理编码获取地址if (geocoder) {geocoder.getAddress([lng, lat], (status: string, result: any) => {if (status === 'complete' && result.regeocode) {const addr = result.regeocode.formattedAddress;form.setFieldsValue({address: addr,lat: lat,lng: lng,});} else {form.setFieldsValue({lat: lat,lng: lng,});message.error('获取地址失败');}});} else {form.setFieldsValue({lat: lat,lng: lng,});}});mapRef.current = { map, marker };}}, [mapLoaded, longitude, latitude, geocoder]);// 地址搜索const handleSearch = () => {const address = form.getFieldValue('address');if (!address) {message.warning('请输入地址');return;}if (!placeSearchRef || !placeSearchRef.search) {message.error('搜索插件尚未初始化，请稍后再试');return;}placeSearchRef.search(address, (status: string, result: any) => {if (status === 'complete' && result.poiList.pois.length) {const selectedPoi = result.poiList.pois[0];const { lat, lng } = selectedPoi.location;setLatitude(lat);setLongitude(lng);// 使用逆地理编码获取完整地址geocoder.getAddress([lng, lat], (status: string, result: any) => {if (status === 'complete' && result.regeocode) {const addr = result.regeocode.formattedAddress;form.setFieldsValue({address: addr, // 使用完整地址而不是POI名称lat,lng,});if (mapRef.current) {mapRef.current.map.setCenter([lng, lat]);mapRef.current.marker.setPosition([lng, lat]);}message.success('定位成功');}});} else {message.error('未找到该地址');}});};return (<div><Form form={form}><div><Form.Item name="address"><Input.Searchplaceholder="搜索地址"enterButton="搜索"style={{ width: 400 }}onSearch={handleSearch}/></Form.Item></div><div style={{ display: 'flex', gap: 16 }}><Form.Item name="lng"><Inputplaceholder="经度"onChange={(e) => {const value = parseFloat(e.target.value);if (!isNaN(value)) {setLongitude(value);if (mapRef.current) {mapRef.current.map.setCenter([value, latitude]);mapRef.current.marker.setPosition([value, latitude]);}}}}style={{ width: 180 }}/></Form.Item><Form.Item name="lat"><Inputplaceholder="纬度"onChange={(e) => {const value = parseFloat(e.target.value);if (!isNaN(value)) {setLatitude(value);if (mapRef.current) {mapRef.current.map.setCenter([longitude, value]);mapRef.current.marker.setPosition([longitude, value]);}}}}style={{ width: 180 }}/></Form.Item></div></Form><divref={mapContainerRef}style={{ height: 500, border: '1px solid #ddd', marginBottom: 16 }}></div></div>);
};export default mapSearch;

关键步骤总结：

  1. 加载高德地图 API 和插件：确保地图和插件已正确加载。
  2. 初始化地图：创建地图实例，并为地图添加点击事件处理器。
  3. 处理地址搜索：用户输入地址后，进行搜索并更新地图位置。
  4. 更新经纬度输入框和标记：用户在输入框中修改经纬度时，地图和标记同步更新。

这些步骤协同工作，提供了一个动态的地图交互界面，用户可以通过搜索地址或直接输入经纬度来改变地图上的标记位置。

 


 

相关文章：

使用react的ant-design-pro框架写一个地图组件，可以搜索地图，可以点击地图获取点击的位置及经纬度

首先&#xff0c;先创建一个地图页面&#xff0c;用于显示地图组件&#xff0c;我是在pages文件中创建了一个mapSearch组件。 然后在routes.ts中注册页面。 {path: /mapSearch,name: mapSearch,icon: smile,component: ./mapSearch,}, 第三步就是使用高德地图来创建地图。 关键…...

编程日记 2025/7/15 17:34:08

【每日八股】复习计算机网络 Day4：TCP 协议的其他相关问题

文章目录 昨日内容复习已经建立了 TCP 连接&#xff0c;客户端突然出现故障怎么办&#xff1f;什么时候用长连接&#xff1f;短连接&#xff1f;TCP 的半连接队列与全连接队列&#xff1f;什么是 SYN 攻击&#xff1f;如何避免&#xff1f;TIME_WAIT 的作用&#xff1f;过多如何…...

编程日记 2025/6/29 9:30:42

Git远程操作与标签管理

目录 1.理解分布式版本控制系统 2.远程仓库 3.新建远程仓库 4.克隆远程仓库 5.向远程仓库推送 6.拉取远程仓库 7.配置Git 7.1.忽略特殊文件 7.2.给命令配置别名 8.标签管理 8.1.理解标签 8.2.创建标签 8.3.操作标签 1.理解分布式版本控制系统 Git是目前世界上…...

编程日记 2025/6/29 9:30:50

Element Plus消息通知体系深度解析：从基础到企业级实践

一、核心组件与技术定位 Element Plus的消息通知体系由三个核心组件构成&#xff1a;ElMessage&#xff08;全局提示&#xff09;、ElNotification&#xff08;通知弹窗&#xff09;和ElMessageBox&#xff08;交互式对话框&#xff09;。这套体系的设计目标是为开发者提供轻量…...

编程日记 2025/6/29 12:23:05

SpringCloud组件——Eureka

一.背景 1.问题提出 我们在一个父项目下写了两个子项目&#xff0c;需要两个子项目之间相互调用。我们可以发送HTTP请求来获取我们想要的资源&#xff0c;具体实现的方法有很多&#xff0c;可以用HttpURLConnection、HttpClient、Okhttp、 RestTemplate等。 举个例子&#x…...

编程日记 2025/7/15 4:54:00

[Godot] C#2D平台游戏基础移动和进阶跳跃代码

本文章给大家分享一下如何实现基本的移动和进阶的跳跃&#xff08;跳跃缓冲、可变跳跃、土狼时间&#xff09;以及相对应的重力代码&#xff0c;大家可以根据自己的需要自行修改 实现效果 场景搭建 因为Godot不像Unity&#xff0c;一个节点只能绑定一个脚本&#xff0c;所以我…...

编程日记 2025/7/15 1:19:31

C语言对n进制的处理

先看一道题目: 从键盘获取一个正整数,如果把它转为16进制的数字,那么它是一个几位数呢?如果把它转为28进制又是一个几位数呢? 在讲这个题目之前,我们先要了解进制转换 什么是进制转换&#xff1f; 简单来说&#xff0c;进制就是数位的表示方法。 十进制&#xff08;常用&am…...

编程日记 2025/7/15 17:22:40

rk3568main.cc解析

rk3568main.cc解析 前言解析总结前言 正点原子rk3568学习，rk官方RKNN_MODEL_ZOO文件中 rknn_model_zoo-main/examples/mobilenet/cpp/main.cc 从执行命令：./build-linux.sh -t rk3568 -a aarch64 -d mobilenet 到： cmake ../../examples/mobilenet/cpp \-DTARGET_SOC=rk3…...

编程日记 2025/7/15 17:17:54

【白雪讲堂】[特殊字符]内容战略地图｜GEO优化框架下的内容全景布局

&#x1f4cd;内容战略地图&#xff5c;GEO优化框架下的内容全景布局 1️⃣ 顶层目标&#xff1a;GEO优化战略 目标关键词&#xff1a; 被AI理解&#xff08;AEO&#xff09; 被AI优先推荐&#xff08;GEO&#xff09; 在关键场景中被AI复读引用 2️⃣ 三大引擎逻辑&#x…...

编程日记 2025/7/13 21:24:05

S32K144学习（16）-Bootloader

1.什么是bootloader Bootloader&#xff08;引导加载程序&#xff09; 是存储在设备非易失性存储器&#xff08;如 ROM、Flash&#xff09;中的一段特殊程序&#xff0c;负责在设备上电后初始化硬件、加载操作系统&#xff08;OS&#xff09;或用户应用程序&#xff0c;并最终…...

编程日记 2025/7/13 20:47:59

反素数c++

先上代码 #include<bits/stdc.h> using namespace std; typedef long long ll; ll n; ll p[]{2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53}; int maxd,maxval; void dfs(int pl,ll tmp,int num,int up){ if((num>maxd)||(nummaxd&&maxval>tmp)){ …...

编程日记 2025/6/29 9:30:46

C++ linux打包运行方案（cmake）

文章目录 背景动态库打包方案动态库转静态库动态库打到软件包中 运行 背景 使用C编写的一个小项目&#xff0c;需要打包成ubuntu下的可执行文件&#xff0c;方便分发给其他ubuntu执行&#xff0c;因为docker镜像方案过于臃肿&#xff0c;所以需要把项目的动态库都打在软件包中…...

编程日记 2025/7/14 7:25:47

JavaScript 渲染内容爬取实践：Puppeteer 进阶技巧

进一步探讨如何使用 Puppeteer 进行动态网页爬取&#xff0c;特别是如何等待页面元素加载完成、处理无限滚动加载、单页应用的路由变化以及监听接口等常见场景。 一、等待页面元素加载完成 在爬取动态网页时&#xff0c;确保页面元素完全加载是获取完整数据的关键。Puppeteer…...

编程日记 2025/7/15 0:12:41

AI数字人：元宇宙舞台上的闪耀新星（7/10）

摘要&#xff1a;AI数字人作为元宇宙核心角色&#xff0c;提升交互体验&#xff0c;推动内容生产变革&#xff0c;助力产业数字化转型。其应用场景涵盖虚拟社交、智能客服、教育、商业营销等&#xff0c;面临技术瓶颈与行业规范缺失等挑战&#xff0c;未来有望突破技术限制&…...

编程日记 2025/6/29 10:56:09

测试基础笔记第九天

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、数据类型和约束1.数据类型2.约束3.主键4.不为空5.唯一6.默认值 二、数据库操作1.创建数据库2.使用数据库3.修改数据库4.删除数据库和查看所有数据库5.重点&…...

编程日记 2025/7/13 20:01:50

C++抽象基类定义与使用

在 C 中&#xff0c;抽象基类&#xff08;Abstract Base Class, ABC&#xff09; 是一种特殊的类&#xff0c;用于定义接口规范和约束派生类的行为。它通过纯虚函数&#xff08;Pure Virtual Function&#xff09;强制要求派生类实现特定功能&#xff0c;自身不能被实例化。以下…...

编程日记 2025/6/29 9:30:47

20.4 显示数据库数据

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的 20.4.1 设计时进行简单绑定 【例 20.22】【项目&#xff1a;code20-022】设计时关联数据库。 设计时设置DataGridView的DataSource属…...

编程日记 2025/7/15 1:37:29

PyTorch 多 GPU 入门：深入解析 nn.DataParallel 的工作原理与局限

当你发现单个 GPU 已经无法满足你训练庞大模型或处理海量数据的需求时&#xff0c;利用多 GPU 进行并行训练就成了自然的选择。PyTorch 提供了几种实现方式&#xff0c;其中 torch.nn.DataParallel (简称 DP) 因其使用的便捷性&#xff0c;常常是初学者接触多 GPU 训练的第一站…...

编程日记 2025/7/13 23:01:33

UDP协议理解

文章目录 UDP协议理解UDP 协议的特点&#xff1a;UDP协议图示UDP 的头部结构&#xff1a;UDP数据传输图示 UDP 的应用场景&#xff1a;TCP 与UDP对比UDP的传输丢包和顺序错乱问题&#xff08;了解&#xff09;丢包的解决方法&#xff1a;顺序错乱的解决方法&#xff1a;综合应用…...

编程日记 2025/7/13 12:15:29

微信小程序拖拽排序有效果图

效果图 .wxml <view class"container" style"--w:{{w}}px;" wx:if"{{location.length}}"><view class"container-item" wx:for"{{list}}" wx:key"index" data-index"{{index}}"style"--…...

编程日记 2025/6/29 9:31:44

算力网络的早期有关论文——自用笔记

2023年底至2024年初阅读有关论文的自用笔记&#xff0c;作为参考。 算力网络架构 https://baijiahao.baidu.com/s?id1727377583404975414&wfrspider&forpc think&note 是否可以和cpu进程调度联系。 目前&#xff1a;看一些综述深一步了解背景和发展现状,完善认…...

编程日记 2025/7/13 16:44:24

卷积神经网络基础（四）

今天我们继续学习各个激活函数层的实现过程。 目录 5.2 Sigmoid层 六、Affine/Softmax层实现 6.1 Affine层 6.2 批处理版本 5.2 Sigmoid层 sigmoid函数的表达式如下&#xff1a; 用计算图表示的话如下&#xff1a; 计算过程稍微有些复杂&#xff0c;且这里除了乘法和加法…...

编程日记 2025/6/29 9:31:25

【MySQL数据库】表的约束

目录 1&#xff0c;空属性 2&#xff0c;默认值 3&#xff0c;列描述 4&#xff0c;zerofill 5&#xff0c;主键primary key 6&#xff0c;自增长auto_increment 7&#xff0c;唯一键unique 8&#xff0c;外键foreign key 在MySQL中&#xff0c;表的约束是指用于插入的…...

编程日记 2025/7/13 17:01:43

网络威胁情报 | Friday Overtime Trooper

本文将分别从两个环境出发&#xff0c;以实践来体验利用威胁情报分析可疑文件的过程。 Friday Overtime 现在你是一位安全分析人员&#xff0c;正在美美等待周五过去&#xff0c;但就在即将下班之时意外发生了&#xff1a;你的客户发来求助&#xff0c;说他们发现了一些可疑文…...

编程日记 2025/7/13 20:16:19

GPIO（通用输入输出端口）详细介绍

一、基本概念 GPIO&#xff08;General - Purpose Input/Output&#xff09;即通用输入输出端口&#xff0c;是微控制器&#xff08;如 STM32 系列&#xff09;中非常重要的一个外设。它是一种软件可编程的引脚&#xff0c;用户能够通过编程来控制这些引脚的输入或输出状态。在…...

编程日记 2025/6/29 9:32:01

学习笔记——《Java面向对象程序设计》-继承

参考教材&#xff1a; Java面向对象程序设计&#xff08;第3版&#xff09;微课视频版 清华大学出版社 1、定义子类 class 子类名 extends 父类名{...... }如&#xff1a; class Student extends People{...... } &#xff08;1&#xff09;如果一个类的声明中没有extends关…...

编程日记 2025/7/15 15:13:38

基于javaweb的SpringBoot校园失物招领系统设计与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/6/29 11:39:08

什么事Nginx，及使用Nginx部署vue项目（非服务器Nginx压缩包版）

什么是 Nginx？ Nginx（发音为 “engine-x”）是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。它以其高性能、高并发处理能力和低资源消耗而闻名。以下是 Nginx 的主要特性和用途： 主要特性 高性能和高并发 Nginx 能够处理大量并发连接，适合高…...

编程日记 2025/7/14 5:10:14

nodejs使用require导入npm包，开发依赖和生产依赖 ，全局安装

nodejs使用require导入npm包&#xff0c;开发依赖和生产依赖 &#xff0c;全局安装 ✅ 一、Node.js 中使用 require() 导入 npm 包 // 导入第三方包&#xff08;例如 axios&#xff09; const axios require(axios);// 使用 axios.get(https://api.example.com).then(res &g…...

编程日记 2025/7/13 12:15:51

CSS在线格式化 - 加菲工具

CSS在线格式化 打开网站 加菲工具 选择“CSS在线格式化” 或者直接访问 https://www.orcc.top/tools/css 输入CSS代码&#xff0c;点击左上角的“格式化”按钮 得到格式化后的结果...

编程日记 2025/6/29 11:56:31

图片转base64 - 加菲工具 - 在线转换

图片转base64 - 加菲工具 先进入“加菲工具” 网 打开 https://www.orcc.top&#xff0c; 选择 “图片转base64”功能 选择需要转换的图片 复制 点击“复制”按钮&#xff0c;即可复制转换好的base64编码数据&#xff0c;可以直接用于img标签。...

编程日记 2025/7/15 7:27:23

性能比拼: Redis vs Dragonfly

本内容是对知名性能评测博主 Anton Putra Redis vs Dragonfly Performance (Latency - Throughput - Saturation) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 在本视频中&#xff0c;我们将对比 Redis 和 Dragonfly。我们将观察 set 与 get 操作的延迟&#xff…...

编程日记 2025/6/29 10:42:57

如何收集用户白屏/长时间无响应/接口超时问题

想象一下这样的场景：一位用户在午休时间打开某电商应用，准备购买一件心仪已久的商品。然而，页面加载了数秒后依然是一片空白，或者点击“加入购物车”按钮后没有任何反馈，甚至在结算时接口超时导致订单失败。用户的耐心被迅速消耗殆尽，关闭应用，转而选择了竞争对手的产品…...

编程日记 2025/6/29 11:00:35

来啦，烫，查询达梦表占用空间

想象一下oracle&#xff0c;可以查dba_segments&#xff0c;但是这个不可靠&#xff08;达梦官方连说明书都没有&#xff09; 先拼接一个sql set lineshow off SELECT SELECT ||||OWNER|||| AS OWNER,||||TABLE_NAME|||| AS TABLE_NAME,TABLE_USED_SPACE(||||OWNER||||,||||T…...

编程日记 2025/7/15 9:44:30

# 利用迁移学习优化食物分类模型：基于ResNet18的实践

利用迁移学习优化食物分类模型&#xff1a;基于ResNet18的实践 在深度学习的众多应用中&#xff0c;图像分类一直是一个热门且具有挑战性的领域。随着研究的深入&#xff0c;我们发现利用预训练模型进行迁移学习是一种非常有效的策略&#xff0c;可以显著提高模型的性能&#…...

编程日记 2025/7/13 16:26:24

AT24C02芯片简介：小巧强大的串行EEPROM存储器

一、AT24C02概述 AT24C02是一款2K位&#xff08;即256字节&#xff09;的串行EEPROM芯片&#xff0c;采用IC&#xff08;Inter-Integrated Circuit&#xff09;总线进行通信&#xff0c;适合低功耗、小容量存储需求。 主要特性&#xff1a; 项目 参数 存储容量 2Kb&#x…...

编程日记 2025/7/15 12:51:38

【Vue】状态管理（Vuex、Pinia）

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Vue 文章目录 1. 状态管理概述1.1 什么是状态管理1.2 为什么需要状态管理 2. Vuex基础2.1 Vuex核心概念2.1.1 State2.1.2 Getters2.1.3 Mutations2.1.4 Actions2.1.5 Modules 2.2 Vuex辅助函数2.2.1 mapState2.2.2 mapGetters2.…...

编程日记 2025/6/29 11:50:20

施磊老师基于muduo网络库的集群聊天服务器(四)

文章目录 实现登录业务登录业务代码补全数据库接口:查询,更新状态注意学习一下里面用到的数据库api测试与问题**问题1:****问题2:** 用户连接信息与线程安全聊天服务器是长连接服务器如何找到用户B的连接&#xff1f;在业务层存储用户的连接信息多线程安全问题加锁! 处理客户端…...

编程日记 2025/7/15 12:51:17

深度学习-全连接神经网络（过拟合，欠拟合。批量标准化）

七、过拟合与欠拟合 在训练深层神经网络时&#xff0c;由于模型参数较多&#xff0c;在数据量不足时很容易过拟合。而正则化技术主要就是用于防止过拟合&#xff0c;提升模型的泛化能力(对新数据表现良好)和鲁棒性&#xff08;对异常数据表现良好&#xff09;。 1. 概念认知 …...

编程日记 2025/7/14 17:21:15

访问Maven私服的教程

1.首先准备好maven私服的启动器&#xff0c;到bin目录下启动&#xff1a; 2.等待加载&#xff0c;加载过程比较长: 3.访问端口号: 4.仓库简介: 5.在maven的setting中 servers配置信息(设置私服访问的密码): 6.配置私服仓库地址: 7.配置上传地址(私服地址): 8.在自己的副项…...

编程日记 2025/7/14 21:03:06

Linux系统编程 day9 SIGCHLD and 线程

SIGCHLD信号 只要子进程信号发生改变&#xff0c;就会产生SIGCHLD信号。 借助SIGCHLD信号回收子进程 回收子进程只跟父进程有关。如果不使用循环回收多个子进程&#xff0c;会产生多个僵尸进程&#xff0c;原因是因为这个信号不会循环等待。 #include<stdio.h> #incl…...

编程日记 2025/7/9 13:30:15

Linux 内核中 cgroup 子系统 cpuset 是什么？

cpuset 是 Linux 内核中 cgroup&#xff08;控制组&#xff09; 的一个子系统&#xff0c;用于将一组进程&#xff08;或任务&#xff09;绑定到特定的 CPU 核心和 内存节点&#xff08;NUMA 节点&#xff09;上运行。它通过限制进程的 CPU 和内存资源的使用范围&#xff0c;优…...

编程日记 2025/7/8 17:45:14

乐视系列玩机---乐视2 x520 x528等系列线刷救砖以及刷写第三方twrp 卡刷第三方固件步骤解析

乐视2 x520 x528 x526等，搭载了高通骁龙652处理器，骁龙652的GPU性能甚至优于前一年的骁龙810，配备了3GB RAM和32GB ROM的存储空间， 通过博文了解💝💝💝 1💝💝💝-----详细解析乐视2 x520系列黑砖线刷救砖的步骤 2💝💝💝----官方两种更新卡刷步骤以及刷…...

编程日记 2025/7/11 23:15:15

电容加速电路！

大家好&#xff0c;我是记得诚。 今天分享一个小电路&#xff1a;电容加速电路。 下面是一个普通的三极管开关电路&#xff0c;区别是多了一个C1&#xff0c;C1被称为加速电容。作用是&#xff1a;加速三极管VT1的开通和截止&#xff0c;做到快开快关。 工作原理&#xff1a;…...

编程日记 2025/7/14 19:58:23

MCP Host、MCP Client、MCP Server全流程实战

目录 准备工作 MCP Server 实现 调试工作 MCP Client 实现 MCP Host 配置 第一步：配置支持 function calling的 LLM 第二步：添加MCP Server 一般有两种方式，第一种json配置，第二种直接是Command形式，我这里采用Command形式 第三步：使用MCP Server 准备工作 安装…...

编程日记 2025/6/29 11:36:17

Win10一体机（MES电脑设置上电自动开机）

找个键盘&#xff0c;带线的那种&#xff0c;插到电脑上&#xff0c;电脑开机&#xff1b;连续点按F11&#xff1b;通过↑↓键选择Enter Setup 然后回车&#xff1b; 选择 smart settings &#xff1b; 选择 Restore AC Power Loss By IO 回车&#xff1b; 将prower off 改为…...

编程日记 2025/6/29 9:30:55

强化学习和微调 区别如下

强化学习和微调 区别如下 定义与概念 强化学习**：是一种机器学习范式，强调智能体（agent）如何在环境中采取一系列行动，以最大化累积奖励**。智能体通过与环境进行交互，根据环境反馈的奖励信号来学习最优的行为策略。例如，机器人通过不断尝试不同的动作来学习如何在复杂环…...

编程日记 2025/6/29 9:31:17

【EasyPan】文件上传、文件秒传、文件转码、文件合并、异步转码、视频切割分析

【EasyPan】项目常见问题解答&#xff08;自用&持续更新中…&#xff09;汇总版 文件上传方法解析 一、方法总览 Transactional(rollbackFor Exception.class) public UploadResultDto uploadFile(...)核心能力&#xff1a; 秒传验证&#xff1a;通过MD5文件大小实现文…...

编程日记 2025/6/29 9:31:23

React18+ 项目搭建-从初始化、技术选型到开发部署的全流程规划

搭建一个 React 项目需要从项目初始化、技术选型到开发部署的全流程规划。以下是详细步骤和推荐的技术栈&#xff1a; 一、项目初始化 1. 选择脚手架工具 推荐工具&#xff1a; Vite&#xff08;现代轻量级工具&#xff0c;支持 React 模板&#xff0c;速度快&#xff09;&am…...

编程日记 2025/7/13 20:20:41

day3 打卡训练营

循环语句和判断语句之前已经会了&#xff0c;把列表的方法练一练 浙大疏锦行 python训练营介绍...

编程日记 2025/7/15 1:37:46