如何在Dash中通过Scattermapbox实现点击/悬停获取坐标的回调？

目前Dash没有直接提供获取Mapbox地图任意位置经纬度的内置属性，但可以通过纯Python方案实现，无需编写JavaScript：

核心思路 #

添加一个覆盖目标地图范围的透明散点图层，让地图的任意位置都能触发点击/悬停事件，再通过Dash内置的clickData和hoverData回调属性提取经纬度。

完整代码示例 #

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go

app = dash.Dash(__name__)

# 创建带透明覆盖层的Mapbox地图
fig = go.Figure()
# 添加覆盖全球的透明散点（可根据需求调整范围）
fig.add_trace(go.Scattermapbox(
    lat=[-90, 90, 90, -90],
    lon=[-180, -180, 180, 180],
    mode='markers',
    marker={'size': 1, 'opacity': 0},
    hoverinfo='none',  # 隐藏不必要的悬停提示
    name='transparent_overlay'
))
# 配置Mapbox基础样式
fig.update_layout(
    mapbox={
        'style': 'open-street-map',
        'center': {'lat': 39.9, 'lon': 116.3},
        'zoom': 10
    },
    margin={'l': 0, 'r': 0, 't': 0, 'b': 0}
)

app.layout = html.Div([
    dcc.Graph(id='mapbox-graph', figure=fig),
    html.Div(id='click-coord', style={'margin': '10px'}, children='点击坐标：'),
    html.Div(id='hover-coord', style={'margin': '10px'}, children='悬停坐标：')
])

# 点击坐标回调
@app.callback(
    Output('click-coord', 'children'),
    Input('mapbox-graph', 'clickData'),
    prevent_initial_call=True
)
def show_click_coord(click_data):
    point = click_data['points'][0]
    lat, lon = point['lat'], point['lon']
    return f'点击坐标：纬度 {lat:.4f}，经度 {lon:.4f}'

# 悬停坐标回调
@app.callback(
    Output('hover-coord', 'children'),
    Input('mapbox-graph', 'hoverData'),
    prevent_initial_call=True
)
def show_hover_coord(hover_data):
    point = hover_data['points'][0]
    lat, lon = point['lat'], point['lon']
    return f'悬停坐标：纬度 {lat:.4f}，经度 {lon:.4f}'

if __name__ == '__main__':
    app.run_server(debug=True)

方案说明 #

1. 透明图层：通过设置opacity: 0让散点完全隐藏，不会干扰原有地图的视觉效果；hoverinfo: none避免弹出多余的悬停提示框。
2. 范围调整：如果你的地图只需要覆盖特定区域（比如某城市），只需修改透明散点的lat和lon值，覆盖目标区域即可，无需全球范围。
3. 纯Python实现：全程使用Dash内置的回调属性和Plotly图形配置，完全不需要编写JavaScript代码。

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