如何从Taipy地图图表的交互点获取额外信息

我们已经在Taipy应用中集成了带标记点的地图，当前交互仅显示含部分信息的悬浮层，现在需要实现交互时获取该点的额外信息，以下是具体解决方案：

核心思路 #

利用Taipy的组件回调事件（点击/悬停），通过事件参数获取选中点的索引，进而从数据源中提取完整的额外信息。

修改后的完整代码 #

from taipy import Gui, State
import pandas as pd
import numpy as np

# 新增额外字段country作为示例数据
cities = [
    {"name": "Tokyo", "lat": 35.6839, "lon": 139.7744, "population": 39105000, "country": "Japan"},
    {"name": "Jakarta", "lat": -6.2146, "lon": 106.8451, "population": 35362000, "country": "Indonesia"},
    {"name": "Xinyang", "lat": 32.1264, "lon": 114.0672, "population": 6109106, "country": "China"},
]

data = pd.DataFrame(cities)

# 计算标记点大小（保留原有逻辑）
solve = np.linalg.solve([[data["population"].min(), 1], [data["population"].max(), 1]], [5, 60])
data["size"] = data["population"].apply(lambda p: p*solve[0]+solve[1])

# 悬浮层文本（保留原有逻辑）
data["text"] = data.apply(lambda row: f"{row['name']} [{row['population']}]", axis=1)

# 存储选中点的额外信息
selected_info = ""

marker = {"size": "size"}
layout = {"dragmode": "zoom", "mapbox": {"style": "open-street-map"}}

# 界面组件：地图+额外信息展示区
page = """
<|{data}|chart|type=scattermapbox|mode=markers|lat=lat|lon=lon|marker={marker}|text=text|layout={layout}|on_click=fetch_extra_info|>

### 选中点额外信息
<|{selected_info}|text|>
"""

def fetch_extra_info(state: State, payload: dict):
    # 从事件payload中获取点击点的索引
    idx = payload["points"][0]["pointIndex"]
    # 提取该行的所有信息（包括额外字段）
    row = state.data.iloc[idx]
    # 格式化展示内容
    state.selected_info = f"""
城市: {row['name']}
国家: {row['country']}
人口: {row['population']:,}
坐标: ({row['lat']:.4f}, {row['lon']:.4f})
"""

Gui(page).run()

关键说明 #

• 事件绑定：在地图组件中添加on_click=fetch_extra_info，绑定点击事件的回调函数；若需悬停触发，替换为on_hover即可。
• 获取选中点数据：回调函数中的payload参数包含点击点的索引，通过state.data.iloc[idx]可获取该行的完整数据，包括悬浮层未显示的额外字段。
• 信息展示：通过绑定selected_info变量，将额外信息实时展示在界面上。

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