整体流程：

1.  新建一个文本组件，调整组件大小用来作为地图的展示区域，点击编辑高级事件

2.  在渲染之后的编辑器中输入以下代码，点击保存

3. 保存即可查看效果

代码详解

第一部分：模板渲染部分

如图所示，将自定义的模板组件渲染到容器内

第二部分：请求接口获取数据并重新渲染模板

写一个fetch的请求，拿到数据后重新渲染模板

完整示例代码

// 声明一个渲染函数
function updateCard(data) {
    // 1. 根据组件id获取组件容器的dom,此处'4u2vv9'为当前文字组件的ID
    let dom = document.getElementById('4u2vv9');
    // 2. 自定义一个HTML组件
    let divhtml = `
      <style>
          .card-container {
              font-size:36px
          }
      </style>
      <div class="card-container">
        姓名：${ data.data.name }
      </div>
    `;
    // 3. 将自定义的组件注入 DOM
    dom.innerHTML = divhtml;
}
// 声明一个fetch请求函数
async function getCardData() {
    try {
        const response = await fetch('http://localhost:8080/card');
        // 检查请求是否成功 (status 200-299)
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 获取接口返回数据
        const data = await response.json();
        // 成功获取数据后，执行模板渲染函数updateCard
        updateCard(data);
        
    } catch (error) {
        console.error('获取卡片数据失败:', error);
        // 这里可以执行降级逻辑，比如显示默认值
    }
}
// 执行请求
getCardData();