Dash Leaflet地图回调报错：点击提交无地图，提示缺少position参数

问题概述 #

开发Dash Leaflet地图应用时，输入纬度、经度点击提交按钮后，地图无法显示，弹出错误：Callback error updating output-state.children，具体为TypeError: Required argument 'position' was not specified。

错误原因 #

代码中创建dl.Marker()时未传入必填的position参数，该参数用于指定标记点的经纬度位置，是Marker组件的强制要求。同时原回调函数中，当n_clicks为None（页面初始加载时）没有返回默认内容，也会导致渲染异常。

修复后的代码 #

import dash_leaflet as dl
from dash import Dash, html, dcc
from dash.dependencies import Input, Output, State

app = Dash()  
app.layout = html.Div([
    html.H1(id='textout'),
    dl.Map(id="output-state", style={'width': '100%', 'height': '75vh', 'margin': "auto", "display": "block"}),
    dcc.Input(id='lat', value=39.298, type='number'),
    dcc.Input(id='long', value=-76.590, type='number'),
    dcc.Input(id='zoom', value=11, type='number'),
    html.Button('Submit', id='submit-button')
])

@app.callback(Output('output-state', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_output(n_clicks, lat, long, zoom):
    # 初始加载或未点击时，只显示基础瓦片层
    base_layer = [dl.TileLayer()]
    if n_clicks is not None:
        # 给Marker添加position参数，绑定输入的经纬度
        marker = dl.Marker(position=(lat, long))
        return base_layer + [marker]
    return base_layer

@app.callback(Output('textout', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_text(n_clicks, lat, long, zoom):    
    if n_clicks is None:
        return "点击提交按钮查看经纬度信息"
    return f'纬度 {lat}, 经度 {long}, 缩放级别 {zoom}, 点击次数 {n_clicks} 次'

if __name__ == '__main__':
    app.run_server(debug=True, host="127.0.0.1")

关键修改说明 #

• Marker组件添加position参数：将dl.Marker()改为dl.Marker(position=(lat, long))，明确指定标记点的经纬度位置，解决必填参数缺失的错误。
• 优化地图布局与回调逻辑：将地图的样式参数移到初始布局的dl.Map中，回调仅更新地图的子组件（瓦片层+标记点），避免重复创建整个Map组件，提升性能。
• 处理初始状态：当n_clicks为None时，返回仅包含瓦片层的默认内容，确保页面加载时地图正常显示；文本回调也添加初始提示内容，提升用户体验。

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