Javascript 在地图上添加标记并将点值捕捉到django表单？Ajax/Geodjango

我在玩Django/GeoDjango（和传单地图），但我缺乏Javascript/AJAX方面的经验，这让我想和你们核实一下

假设我想添加一个带有位置和一些其他信息字段的标记（并将其另存为新的Django model intance）

我想单击地图，在位置上放置一个标记，然后在模式中打开一个表单。然后已经有了地图点击的位置数据。还有一些空字段。如果点击一个新的地方，它会自动更新

• 我是否应该将一个模态绑定到地图单击，然后在某种“隐藏”字段中填充pointfield
• 或者将点击点数据“发布”到django视图，该视图捕获该点，并以某种方式发送回填写了该点字段的表单
• 替代方案

---

我对你关于构建此表单的最佳方法的意见很感兴趣？

我会设置模式并在地图的客户端创建表单，而不是返回服务器渲染表单。由于不需要点击服务器来显示表单，这样做将不必要地耦合客户端和服务器端逻辑。是的，您可以将标记位置的值存储在一个隐藏字段中（或者隐藏字段，如果您想分别存储纬度和经度）

编辑：

我不确定您的体系结构是如何设置的，但在javascript方面，您可以在打开对话框后将pointvalue直接添加到表单中。下面是一个非常粗略的示例，显然不适用于地图上下文，但它可能会让您知道从哪里开始。因此，假设您通过呈现Django表单获得了以下html（以及单击的按钮）：

---

然后，您可以设置要提交对话框表单的任何逻辑。隐藏值将与其他输入一起提交

这就是我要尝试的。一点功能。当我单击地图时，它似乎会在我的对话框表单中的输入字段中添加一秒钟的值，但它再次消失。我没有包括函数的其他部分，这是一些表单验证，但我认为这并不重要，因为我尝试过没有这一部分。如果我将输入放在对话框之外，它似乎可以工作。是的，我是这里的初学者

function onMapClick(e) {
      var lat = e.latlng.lat;
      var lng = e.latlng.lng;

      if (typeof marker != 'undefined') {
          map.removeLayer(marker);
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }
      else {
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }


      $('#upload-modal').load('upload/ #myform');

      $('#test_input').val(lng + ',' + lat); //This is what Im trying <----

        $('#upload-modal').dialog({
              height: 550,
              width: 500,
              modal: false,

函数onmaplick（e）{
var lat=e.latlng.lat；
var lng=e.latlng.lng；
如果（标记类型！=“未定义”）{
地图移除层（标记）；
marker=L.marker（[lat，lng]，{icon:redMarker}）.addTo（map）；
}
否则{
marker=L.marker（[lat，lng]，{icon:redMarker}）.addTo（map）；
}
$（“#上传模式”）.load（'upload/#myform'）；
$（“#test_input”）.val（lng+”，“+lat）；//这就是我要做的，谢谢你的回答！好吧！我开始将Django表单（子html模板）加载到模式（jquery对话框）中因为我已经设置了这个函数。但我可能必须重新构建它。问题是从现在开始我该做什么。我可以直接将pointvalue插入表单字段吗？谢谢你，Divey！这是我一直在尝试的方法。但最接近的一点是，当我单击地图时，对话框会打开表单（带有一个额外的测试输入字段）。这很好。问题是该值不会停留在字段中，它只是显示一毫秒然后消失。也许我可以发布整个函数，您可以看一看？尝试将其作为一个新问题发布（使用整个onmaclick函数的代码）。简而言之，您需要将回调函数作为第二个参数传递给
load（）函数
函数，并在该函数中设置
#test_input
值。如果您将其作为新问题发布，某人将能够用代码片段为您提供更长的解释。好的。我将首先自己尝试更多，稍后可能会发布新线程。谢谢Divey
// rather than bind a button called #map, you 
// would bind to whatever map click event is available
$('#map').click(function (event) {
    // get the point value from whatever map API you are using 
    var pointval = 123;

    // set the value of the hidden input
    $('#point').val(pointval);

    // open the dialog
    $( "#dialogform" ).dialog();    
});

function onMapClick(e) {
      var lat = e.latlng.lat;
      var lng = e.latlng.lng;

      if (typeof marker != 'undefined') {
          map.removeLayer(marker);
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }
      else {
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }


      $('#upload-modal').load('upload/ #myform');

      $('#test_input').val(lng + ',' + lat); //This is what Im trying <----

        $('#upload-modal').dialog({
              height: 550,
              width: 500,
              modal: false,