使用Taipy时出现traffic_category未定义错误，请求技术支持

你遇到的三个警告核心原因是Taipy的UI变量必须绑定到state状态对象，而非普通全局变量，页面无法直接访问全局定义的traffic_category。以下是具体错误分析和修复步骤：

错误原因拆解 #

• 全局定义的traffic_category不属于Taipy的状态管理体系，页面模板无法识别它。
• on_change函数中直接赋值traffic_category = val，没有更新state对象里的变量，导致UI无法同步更新。
• display_map函数没有返回地图实例，且未将生成的地图绑定到state变量，无法在页面渲染。

修复步骤 #

1. 初始化状态变量 #

将全局变量改为通过state初始化，在应用启动时把需要的变量注册到state中。

2. 修改on_change函数 #

必须通过state.traffic_category = val来更新状态变量，确保UI能感知到变化；同时调用display_map时传入最新数据，并将返回的地图实例赋值给state变量。

3. 完善display_map函数 #

让函数返回生成的gmaps.figure实例，才能赋值给state变量供页面渲染。

4. 更新页面模板 #

添加地图渲染组件，绑定到state中的地图变量。

修正后的完整代码 #

import collections
import gmaps
import pandas as pd
from taipy.gui import Markdown, notify
from custom_funcs.get_data_with_coordinates import get_location

data_map = pd.read_csv('files/final_data.csv', usecols=["date", "content","traffic_class", "place"]).dropna()

# 初始化基础选项列表
selectors = list(data_map.traffic_class.unique())

def on_init(state):
    # 应用启动时给state绑定所有需要的变量
    state.traffic_category = "free flow"
    state.data = get_location(data_map, state.traffic_category).dropna()
    state.map_fig = display_map(state.data)

def display_map(data):
    # 定义地图中心
    center = (data['lat'].mean(), data['lng'].mean())
    locations=data[['lat', 'lng']]
    
    # 定义地图布局
    fig_layout = {
        'width': '800px',
        'height': '600px',
        'border': '1px solid black',
        'padding': '10px'
    }
    
    # 创建地图实例
    fig = gmaps.figure(
        center=center, 
        zoom_level=12, 
        layout=fig_layout,
        map_type='HYBRID',
    )
    
    fig.add_layer(gmaps.heatmap_layer(locations))
    
    # 返回地图实例供state绑定
    return fig

def on_change(state, var, val):
    if var == "traffic_category":
        state.traffic_category = val
        notify(state, f"Viewing Map for {val}")
        state.data = get_location(data_map, val).dropna()
        # 更新state中的地图实例
        state.map_fig = display_map(state.data)

page="""
#####Check maps here

######Check the maps for the traffic Categories in Lagos below
<|layout|columns=1 200px|
<|
<|{traffic_category}|selector|lov={selectors}|dropdown|label=See Map|>
|>

<|
<|{traffic_category}|>
|>
|>

<!-- 新增地图渲染组件 -->
<|{map_fig}|chart|>
"""

关键修改点说明 #

• 新增on_init函数：在应用启动时初始化state的traffic_category、data和map_fig变量，确保页面加载时所有变量都处于可访问状态。
• on_change中用state.traffic_category = val替代直接赋值，实现状态与UI的同步。
• display_map返回fig实例，赋值给state.map_fig供页面渲染。
• 页面模板添加<|{map_fig}|chart|>组件，展示生成的热力地图。

这样修改后，三个警告会全部消失，地图也能根据选择器的变化实时更新。

内容的提问来源于stack exchange，提问作者Lawal Olanrewaju