天地图InfoWindow插入React自定义组件

截至2025年03月21日天地图的Marker不支持添加Label; 同时Label和Icon是不支持自定义HTMLElement只支持String;目前只有InfoWindow支持自定义HTMLElement;

效果图
React核心api
typescript 复制代码
import ReactDOM from 'react-dom/client'
const content = document.createElement('div');
ReactDOM.createRoot(content).render((
 <CurLineInfoWindowContent optionsClick={curInfoWindowClick}/>
));
天地图InfoWindow
typescript 复制代码
// 创建
const infoWin = new T.InfoWindow();
// 开启
map.openInfoWindow(infoWin, e.lnglat)
// 关闭
map.closeInfoWindow(infoWin);
// 插入自定义
infoWin.setContent(content: String | HTMLElement);

场景模拟: 点击线弹出编辑和删除

自定义组件_编辑/删除
typescript 复制代码
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>
    );
};
天地图创建线和绑定事件
typescript 复制代码
/* 创建线 */
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);
});
相关推荐
倔强青铜三4 分钟前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三12 分钟前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹14 分钟前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三30 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_32 分钟前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
我是若尘44 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓13131 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z1 小时前
uniapp使用video实现沉浸式在线课程学习平台
前端