点击Folium地图添加Marker并获取坐标功能报错求助

问题情况 #

修改Folium代码实现点击地图添加Marker，并在textarea中显示坐标时，触发错误：

Uncaught TypeError: document.getElementById(...) is null

错误原因 #

1. HTML中textarea标签书写错误：使用了<text-area>（带连字符），但正确的标签名是<textarea>（无连字符），导致JS无法通过ID找到对应元素。
2. 表单元素textarea的内容应该通过value属性设置，而非innerHTML，后者不适用于表单输入控件。

修复步骤 #

1. 修正HTML代码 #

将错误的<text-area>标签改为正确的<textarea>：

<div align="center" class="form-group"></div>
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div>
   Lat:  
   <textarea name="clk_lat1" id="clk_lat1"></textarea>
   Lng: 
   <textarea name="clk_lng1" id="clk_lng1"></textarea>
</div>

2. 修正JavaScript代码 #

将设置内容的方式从innerHTML改为value，同时移除Marker中无效的参数：

map = folium.Map(location=[lat, lng], zoom_start=20)
marker = folium.Marker(
    [lat, lng],
    tooltip=tooltip,
    icon=folium.Icon(color="red", icon=""),
    popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())

mapJsVar = map.get_name()

map.get_root().html.add_child(
    folium.Element(
        """
<script type="text/javascript">
$(document).ready(function () {
{map}.on("click", addMarker);

function addMarker(e) {
    const marker = new L.marker(e.latlng, {
    draggable: true,
    }).addTo({map});
    document.getElementById('clk_lat1').value = marker.getLatLng().lat;
    document.getElementById('clk_lng1').value = marker.getLatLng().lng;
}
});
</script>
""".replace(
            "{map}", mapJsVar
        )
    )
)
map = map._repr_html_()
context = {"map": map}

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