天地图InfoWindow插入React自定义组件
截至2025年03月21日天地图的Marker不支持添加Label; 同时Label和Icon是不支持自定义HTMLElement只支持String；目前只有InfoWindow支持自定义HTMLElement;
效果图
React核心api
import ReactDOM from 'react-dom/client'
const content = document.createElement('div');
ReactDOM.createRoot(content).render((<CurLineInfoWindowContent optionsClick={curInfoWindowClick}/>
));
天地图InfoWindow
// 创建
const infoWin = new T.InfoWindow();
// 开启
map.openInfoWindow(infoWin, e.lnglat)
// 关闭
map.closeInfoWindow(infoWin);
// 插入自定义
infoWin.setContent(content: String | HTMLElement);
场景模拟: 点击线弹出编辑和删除
自定义组件_编辑/删除
import style from './style.module.less';
const CurLineInfoWindowContent = ({optionsClick}: any) => {// 你的React组件，包含编辑和删除按钮return (<div className={style.custom_line_window_wrap}>{/* <span className={style.custom_line_window_name}>路线: {linePathNum} (个点)</span> */}<button onClick={(event: any) => {const currentTarget = event.currentTarget;currentTarget.disabled = true;setTimeout(() => { currentTarget.disabled = false; }, 250);optionsClick(0);}}>点编辑</button><button className={style.del_button}onClick={(event: any) => {const currentTarget = event.currentTarget;currentTarget.disabled = true;setTimeout(() => { currentTarget.disabled = false; }, 250);optionsClick(1);}}>删除</button></div>);
};
天地图创建线和绑定事件
/* 创建线 */
var points = [];
points.push(new T.LngLat(116.41239, 39.97569));
points.push(new T.LngLat(116.412799, 39.9068));
points.push(new T.LngLat(116.32970, 39.92940));
points.push(new T.LngLat(116.385440, 39.90610));
var polyline = new T.Polyline(points , {weight: 6,color: '#3366FF'
});
/* 创建infoWindow */
const infoWin = new T.InfoWindow();
// 创建一个div
const content = document.createElement('div');
// 绑定自定义组件事件
const curInfoWindowClick(action: number){switch(action){case 0:{ // 处理编辑逻辑polyline.enableEdit();}break;case 1:{ // 处理删除逻辑map.removeOverLay(polyline);}break;default:break;}
}
// 将React组件渲染到DOM
ReactDOM.createRoot(content).render((<CurLineInfoWindowContent optionsClick={curInfoWindowClick}/>
));
// 插入到infoWindow
infoWin.setContent(content);
/* 绑定事件 */
// 绑定点击事件
polyline.addEventListener('click', (e: any) => {map.openInfoWindow(infoWin, e.lnglat)
});
// 如果线被移除了_顺手把弹窗给隐藏掉
polyline.addEventListener('remove', (e: any) => {map.closeInfoWindow(infoWin);
});相关文章：
天地图InfoWindow插入React自定义组件
截至2025年03月21日天地图的Marker不支持添加Label; 同时Label和Icon是不支持自定义HTMLElement只支持String；目前只有InfoWindow支持自定义HTMLElement; 效果图 React核心api import ReactDOM from react-dom/client const content document.createElement(div);…...
深度学习PyTorch之动态计算图可视化 - 使用 torchviz 生成计算图
序号系列文章1深度学习训练中GPU内存管理2深度学习PyTorch之数据加载DataLoader3深度学习 PyTorch 中 18 种数据增强策略与实现4深度学习pytorch之简单方法自定义9类卷积即插即用5深度学习PyTorch之13种模型精度评估公式及调用方法6深度学习pytorch之4种归一化方法（…...
拓展知识三：编码学及密码学
编码和密码的区别 研究密码变化的客观规律，应用于编制密码以保守通信秘密的，称为编码学；应用于破译密码以获取通信情报的，称为破译学，总称密码学。 编码和密码是两个不同的概念，它们的区别如下：…...
】解锁商城国际化密码：内容管理全攻略)
【商城实战(54)】解锁商城国际化密码：内容管理全攻略
【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配…...
JS 应用WebPack 打包器第三方库 JQuery安装使用安全检测
# 打包器 -WebPack- 使用 & 安全 参考： https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源文件都作为模块处理。 它将根据模块的依赖关系进行分析，生成对应的资源。 五个核心概…...
【嵌入式硬件】三款DCDC调试笔记
关于开关电源芯片，重点关注输入电源范围、输出电流、最低压降。 1.MP9943: 以MP9943为例，输入电压范围4-36V，输出最大电流3A，最低压降为0.3V 调整FB使正常输出为5.06V 给定6V空载、5V空载、5V带2A负载的情况： 6V带2A…...
深入理解 HTML5 Web Workers：提升网页性能的关键技术解析
深入理解 HTML5 Web Workers：提升网页性能的关键技术解析 引言1. 什么是 Web Workers？Web Workers 的特点： 2. Web Workers 的使用方式2.1 创建一个 Web Worker步骤 1：创建 Worker 文件步骤 2：在主线程中调用 Worker 3…...
计算机网络的分类——按照按拓扑结构分类
计算机的拓扑结构是引用拓扑学中研究和大小、形状无关的点、线关系的方法，将网络中的计算机和通信设备抽象为一个点，把传输介质抽象成一条线，由点和线组成的几何图形就是计算机网络的拓扑结构。计算机网络的拓扑结构主要由通信子网决定&#…...
AI大白话（四）：自然语言处理——AI是如何理解和生成人类语言的？
🌟引言： 专栏：《AI大白话》 AI大白话（一）：5分钟了解AI到底是什么？ AI大白话（二）：机器学习——AI是怎么“学习“的？ AI大白话（三）：深度学习——AI的‘大脑‘是如何构建的？ 大家好！欢迎回到"AI大白话"系列。前面我们聊了AI的基本概念、机器学习的原理…...
Android第六次面试总结（Java设计模式篇一）
单例模式属于创建型设计模式，它保证一个类仅有一个实例，并且提供一个全局访问点来获取该实例。下面为你详细阐述单例模式的好处和坏处。 好处 资源优化：单例模式能保证一个类只有一个实例，这对于那些创建和销毁开销大的对象&…...
如何在 React 项目中进行服务器端渲染（SSR），它有什么优势
大白话如何在 React 项目中进行服务器端渲染（SSR），它有什么优势 什么是服务器端渲染（SSR） 在传统的 React 项目里，页面的渲染工作是在浏览器里完成的。也就是当你访问一个网页时，浏览器会先下…...
JVM 01
今天是2025/03/20 16:36 day 09 总路线请移步主页Java大纲相关文章 今天进行JVM前二个模块的归纳 首先是JVM的相关内容概括的思维导图 以下是针对思维导图中 内存管理 和 垃圾回收（GC） 模块的详细说明： 1. 内存管理（运行时数据…...
MATLAB 调用arduino uno
为了授课，必须重新把arduino用上。 采用MATLAB编码，可以简化相关程序授课部分 1 安装包 MATLAB Support Package for Arduino Hardware - File Exchange - MATLAB Central (mathworks.com) 需要这个插件。 当然也可下载simulink的模块，但…...
WPS宏开发手册——JSA语法
目录 系列文章2、JSA语法2.1、打印输出2.2、注释2.3、变量2.4、数据类型2.5、函数2.6、运算符2.7、比较2.8、if else条件语句2.9、for循环2.10、Math对象（数字常用方法）2.11、字符串常用方法2.12、数组常用方法 系列文章 使用、工程、模块介绍 JSA语…...
linux如何释放内存缓存
[rootredis ~]# sync #将内存缓存数据强制写入磁盘（保存数据后再做释放） [rootredis ~]# echo 1 > /proc/sys/vm/drop_caches #释放内存缓存...
2025年渗透测试面试题总结-某360-企业蓝军面试复盘 （题目+回答）
网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 360-企业蓝军 一、Shiro绕WAF实战方案 二、WebLogic遭遇WAF拦截后的渗透路径 三、JBoss/WebLogic反序…...
Atlas 800I A2 双机直连部署DeepSeek-R1-w8a8
一、环境信息 1.1、硬件信息 Atlas 800I A2 * 2 1.2、环境信息 操作系统：openEuler 22.03 LTS NPU驱动：Ascend-hdk-910b-npu-driver 24.1.0 linux-aarch64.run NPU固件：Ascend-hdk-910b-npu-firware 7.5.0.3.220.run MindIE镜像ÿ…...
OpenHarmony 入门——ArkUI 跨页面数据同步和页面级UI状态存储LocalStorage小结（二）
文章大纲 引言一、在代码逻辑使用LocalStorage二、从UI内部使用LocalStorage三、LocalStorageProp和LocalStorage单向同步四、LocalStorageLink和LocalStorage双向同步五、兄弟组件之间同步状态变量七、将LocalStorage实例从UIAbility共享到一个或多个视图 引言 前面一篇文章主…...
自我革命！优利德全面进入智能示波器时代
AI重构电子测试新范式 春节期间，DeepSeek（深度求索）火遍全网。作为国内首个全面对标GPT-4技术架构的AI大模型，DeepSeek凭借其自主研发的通用大语言模型体系，涵盖了从7B到超千亿参数的完整模型矩阵，在数学推…...
Vue3 实战：基于 mxGraph 与 WebSocket 的动态流程图构建
本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库，并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。 一、技术栈准备 Vue3：采用 Composition API 开发mxGraph：JavaScript 流程图库（版本 …...
Python-金融相关代码讲解
文章目录 概要整体架构流程1.代码部分2.逐个讲解1）# -*- coding: utf-8 -*-2）基本库引入3）函数模块4）主程序 小结1. 问题拆解思维2. 文件处理三件套3. 字典的妙用：4. 上下文管理器（with open...）…...
深度解读DeepSeek：开源周（Open Source Week）技术解读
深度解读DeepSeek：开源周（Open Source Week）技术解读 深度解读DeepSeek：源码解读 DeepSeek-V3 深度解读DeepSeek：技术原理 深度解读DeepSeek：发展历程 文章目录 一、开源内容概览Day1：FlashMLAD…...
【算法】十大排序算法(含时间复杂度、核心思想）
以下是 **十大经典排序算法** 的时间复杂度、空间复杂度及稳定性总结，适用于面试快速回顾：排序算法对比表 排序算法最佳时间复杂度平均时间复杂度最差时间复杂度空间复杂度稳定性核心思想冒泡排序O(n)O(n)O(n)O(1)稳定相邻元素交换，大数沉底…...
TCP传输---计算机网络
TCP结构 源端口和目标端口：标识通信的应用程序。序列号：标记发送的数据段的顺序序号。确认号 ( ACK)：确认接收到的数据序号。标志位：控制连接状态，包括 SYN（同步）、ACK（确认…...
创建vue2项目
1、前往 Node.js 官网下载并安装 Node.js，安装完成后，npm 会随之安装。确认 Node.js 和 npm 是否成功安装，可以在命令行中运行以下命令检查版本： node -v npm -v 运行结果：（如下，表示node和n…...
从投机到可持续发展：ETHDenver 2025 的关键启示！
ETHDenver 2025 重点讨论了 Web3 向可持续发展转型，特别强调了人才培养、去中心化治理和激励机制的紧密结合。Polkadot 一直以来的长期观点也进一步支持了行业从投机转向长期、社区驱动增长的趋势。随着 ETHDenver 2025 会议的的落幕，Polkadot 生态中的贡…...
WPS宏开发手册——使用、工程、模块介绍
目录 系列文章前言1、开始1.1、宏编辑器使用步骤1.2、工程1.3、工程 系列文章 使用、工程、模块介绍 JSA语法 第三篇练习练习题，持续更新中… 前言 如果你是开发人员，那么wps宏开发对你来说手拿把切。反之还挺吃力，需要嘻嘻…...
操作系统为ubantu的服务器上部署nginx软件基础步骤总结
今天在这里，我们总结一下ubantu的服务器上部署nginx软件，请按照以下步骤进行安装： 1、更新包列表： 首先更新你系统中的可用软件包列表，以确保你可以安装最新版本。 sudo apt update2、 Ubuntu上更新已安装软件包&…...
批量给 PPT 文档添加或删除保护，批量设置打开密码和只读密码
为了保护保护档的安全，我们经常会给 PPT 文档添加打开密码或者只读密码保护。有些场景下，我们也可能会碰到需要删除 PPT 文档的打开密码或者只读密码的需求。今天就给大家介绍一种方法可以一次性批量给多个 PPT 文档添加打开密码或者只读密码保护&#x…...
Elasticsearch 中的数据分片问题
Elasticsearch 分片机制 Elasticsearch 在存储数据时采用 分片（Shard）机制，以提高性能和可扩展性。它索引中的数据被划分成多个 主分片（Primary Shard） 和 副本分片（Replica Shard），…...
如何在IPhone 16Pro上运行python文件？
在 iPhone 16 Pro 上运行 Python 文件需要借助第三方工具或远程服务，以下是具体实现方法和步骤： 一、本地运行方案（无需越狱） 使用 Python 编程类 App 以下应用可在 App Store 下载，支持直接在 iPhone 上编写并运行 …...
Xinference安装、使用详细笔记
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Xinference安装、使用详细笔记 支持推理引擎安装Xinference启动Xinference关于模型的推理引擎运行 qwen2.5-instruct管理模型官方详细文档：具体使用：对…...
NAT 模式
使用LVS的 NAT 模式实现 3 台RS的轮询访问。IP地址和主机自己规划。 1.节点规划 主机角色系统网络IPclientclientredhat 9.5仅主机192.168.180.100/24lvslvsredhat 9.5仅主机 NAT192.168.180.200/24 VIP 192.168.72.8/24 DIPnginxrs1redhat 9.5NAT192.168.226.7/24nginxrs2r…...
【中间件】Rabbit离线部署操作
准备安装包： 1.rabbitmq-server-4.0.7-1.el8.noarch.rpm 2.erlang-26.2.5.4-1.el9.x86_64.rpm 3.socat-1.7.4.1-6.el9.x86_64.rpm 操作步骤： 1.上传将RabbitMQ文件夹上传至服务器的home中 2.先安装erlang服务，顺序执行以下命令 设置服务的S…...
thinkphp漏洞再现
Thinkphp5x远程命令执行及getshell 1、开环境 2、使用工具攻击 开启工具 输入地址，点击漏洞检测 存在漏洞之后，选择漏洞，执行命令 3、也可以执行远程命令 执行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…...
a-date-picker 格式化日期格式 YYYY-MM-DD HH:mm:ss
<template><a-range-pickerv-model:value"dateRange":show-time"{ format: HH:mm:ss, // 时间部分格式defaultValue: [moment(00:00:00, HH:mm:ss), moment(23:59:59, HH:mm:ss)] // 默认时间范围}"format"YYYY-MM-DD HH:mm:ss" // 整体…...
【前端】在＜el-form＞里循环插入list内容
这里的list为日志list【logList】 <el-row v-if"logList && logList.length > 0" style"display: flex; flex-direction: column; align-items: center;"><el-rowv-for"(log, index) in logList" :key"index" s…...
Spring Boot 一个接口实现任意表的 Excel 导入导出
Java的web开发需要excel的导入导出工具，所以需要一定的工具类实现，如果是使用easypoi、Hutool导入导出excel，会非常的损耗内存，因此可以尝试使用easyexcel解决大数据量的数据的导入导出，且可以通过Java8的函数式编程解…...
华为交换相关
端口模式 （1）access：只能属于单个VLAN，一般用于连接计算机端口 （2）trunk：端口允许多个VLAN通过，可以接收和发送多个VLAN报文，默认情况下只有管理VLAN不携带标签信息 &…...
「宇树科技」13家核心零部件供应商梳理！
2025年2月6日，摩根士丹利（Morgan Stanley）发布最新人形机器人研报：Humanoid 100: Mapping the Humanoid Robot Value Chain（人形机器人100：全球人形机器人产业链梳理）。 2025年2月20日…...
Kafka Snappy 压缩异常分析与解决方案
1. 问题描述 在使用 Kafka 进行消息发送时，遇到了以下异常： org.apache.kafka.common.KafkaException: java.lang.UnsatisfiedLinkError: /tmp/snappy-1.1.7-ee0a2284-1d05-4116-9ddc-a0d5d4b3f8cd-libsnappyjava.so: Error loading shared library ld…...
Agent系列——Manus调研
一、Manus核心技术解析（代码实现原理） 1. 多智能体协同架构 class PlanningAgent: # 任务规划代理def decompose_task(self, task):return ["unzip_files", "extract_info", "match_skills"]class ExecutionAgent: # …...
CS实现票据样式效果
效果图 代码 <template> <div class"outer"><div class"outer-container"></div></div> </template> <script langts> import { reactive, toRefs, onBeforeMount, onMounted } from vue import { useRouter, …...
Maven 简介及其核心概念
Maven 是 Apache 软件基金会组织维护的一款自动化构建工具，专注服务于 Java 平台的项目构建和 依赖管理。 官网： Introduction – Maven 下载地址： Download Apache Maven – Maven 1 Introduction Maven, a Yiddish word meaning accumulator of knowledge, began as an …...
阿里开源的免费数据集成工具——DataX
企业里真实的数据流转是什么样子的呢？ 左侧描述了一个企业真实的样子，我们总是需要把数据从一个地方搬到另一个地方，最后就是搬来搬去搬成了一张张解不开的网。 右侧则表达了使用DataX为中心实现数据的同步。 什么是DataX DataX是一个异构…...
医学图像分割数据集肺分割数据labelme格式6299张2类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图像分辨率：1024x1024 图片数量(jpg文件个数)：6299 标注数量(json文件个数)：6299 标注类别数：2 标注类别名称:["leftl…...
Spring IoC的设计与实现
IoC,Inversion of Control 控制反转，将原本由应用程序负责对象创建的工作，交给IOC容器来完成。容器通过依赖注入（DI，Dependency Injection）来实现。 作用：降低类对象之间的耦合度，减少代码量。…...
微信小程序开发：页面结构与样式设计
微信小程序页面结构与样式设计研究 摘要 微信小程序作为移动互联网的重要应用形式，其页面结构与样式设计对于用户体验和功能实现具有关键作用。本文深入探讨微信小程序的页面结构与样式设计，包括WXML语法与页面结构搭建、WXSS样式编写与页面美化提升以…...
Linux paste命令
目录 一. 简介二. 基本语法三. 小案例 一. 简介 paste 命令用于合并多个文件的行，按列方式输出，默认以制表符（Tab）分隔。 ⏹基本语法 paste [选项] 文件1 文件2 ...二. 基本语法 <()的方式模拟文件流paste命令将2个文件流粘…...
关于Object.assign
Object.assign 基本用法 Object.assign() 方法用于将所有可枚举属性的值从一个或者多个源对象source复制到目标对象。它将返回目标对象target const target { a: 1, b: 2 } const source { b: 4, c: 5 }const returnedTarget Object.assign(target, source)target // { a…...