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