天地图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);
});