在 Django 模型中保存传单标记

Question

我想用 django 创建一个网络应用程序，用户可以在其中在地图上创建标记。我有这个 js 脚本，可以通过单击传单地图来添加标记。

window.onload = function () {
    element = document.getElementById('osm-map');
    var markers_list = new Array()
    var map = L.map(element);
    let rm = false
    
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    // var markers = L.featureGroup([])
    var target = L.latLng('48.8686034651125', '2.34261607443957');
    map.setView(target, 5);

    map.on('click', function (e) {
        var node = document.createElement("LI")
        var marker = new L.marker(e.latlng).addTo(map);
        markers_list.push(marker);
        var marker_id = marker._leaflet_id
        let title_marker = window.prompt("give a name to your marker",marker_id);
        //todo make sure input is not empty
        while (!title_marker){
            title_marker = window.prompt("give a non empty name",marker_id);
        }
        marker.bindPopup("marker's info: "+title_marker).openPopup()
        map.addLayer(marker)
        a = document.createElement('a')
        a.innerHTML=title_marker
        a.setAttribute('id', marker_id)
        a.setAttribute('href',"javascript:void(0);");
        node.appendChild(a);
        document.getElementById("marker-list").appendChild(node)
        }
    );

    rm_btn.onclick = function () { // function to enable edit of marker
        rm = !rm
        if (rm) {
            document.getElementById('rm_btn').innerHTML = "Edition enabled";
        }
        else {
            document.getElementById('rm_btn').innerHTML = "Edition disabled";
        }
    }
    
        var ul = document.getElementById('marker-list'); //list of li marker
        ul.onclick = function(e) {
            if (rm) {
            id_to_rem = e.target.id
            for(var i=0;i<markers_list.length;i++){// iterate over layer to remove marker from map
                if (markers_list[i]._leaflet_id == id_to_rem){
                    map.removeLayer(markers_list[i])
                }
            }
            var a_list = ul.getElementsByTagName('a')
            for(var i=0;i<a_list.length;i++){// iterate over ul to remove marker from li
                if (a_list[i].id == id_to_rem){
                    ul.removeChild(ul.childNodes[i+1])
                }
            }        
        };
    }   
}

标记保存在标记列表数组中。如何将这些标记保存在 django 模型中。我必须在 html 模板中放置一个脚本标签然后做一些 django 的事情还是有其他解决方案？

谢谢

Answer 1

你的问题很宽泛。因此，我不会为所需的所有不同部分（模型、视图、url、模板、js 脚本）编写代码，而是提供一个大纲，您可以使用它来进一步缩小问题范围。

根据您的应用程序逻辑和偏好，您的数据应使用 AJAX 或作为表单提交提交。如果您需要在没有“页面刷新”的情况下提交数据，请使用 AJAX。如果用户没有最终提交操作，那么AJAX从用户体验的角度来说肯定会更好。

AJAX

有许多在线资源解释了如何将 AJAX 与 Django 一起使用。例如，

另请参阅详细的 Django documentation，了解如何在 AJAX 请求中包含 CSRF 令牌。

您必须做出的一个决定是是否要使用表单发送数据。如果您在没有表单的情况下发送数据，请确保正确处理验证。使用表单发送数据的优点是 Django 负责表单验证、清理等。

如果您想使用表单，您可以在 html 中包含带有隐藏字段的表单，并在设置标记时用 JS 填充这些字段。您可能需要一个动态的 formset, since the number of markers is not fixed. Then you can use FormData 来序列化表单字段并将序列化的数据发送到您的 Django 后端，然后它可以以标准方式处理数据。

没有AJAX

在这种情况下，您执行与上述相同的操作（使用标记数据填充隐藏字段），但不是通过 AJAX 提交请求，例如一个标准的提交按钮。

在 Django 模型中保存传单标记

save leaflet marker in django model

javascript

python

django

leaflet