Сохранение маркера листовки в модели django

Я хочу создать веб-приложение с 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])
                }
            }        
        };
    }   
}

Маркеры сохраняются в массиве marker-list. Как можно сохранить эти маркеры в модели django. Должен ли я поместить тег script в html-шаблон, а затем сделать некоторые вещи в django или есть другое решение?

Спасибо

Ваш вопрос довольно широкий. Поэтому вместо того, чтобы писать код для всех различных частей, которые необходимы (модель, представление, url, шаблон, js скрипт), я предоставлю набросок, который вы можете использовать для дальнейшего сужения проблемы.

В зависимости от логики вашего приложения и ваших предпочтений, ваши данные должны быть представлены либо с помощью AJAX, либо в виде отправки формы. Используйте AJAX, если вам нужно отправить данные без "обновления страницы". Если пользователь не будет выполнять окончательное действие отправки, то AJAX будет лучше с точки зрения пользовательского опыта.

AJAX

В Интернете есть много ресурсов, которые объясняют, как использовать AJAX с Django. Например,

Посмотрите также подробную документацию Django documentation о том, как включить CSRF-токен в AJAX-запрос.

Одно из решений, которое вам необходимо принять, - это отправлять данные с формой или нет. Если вы отправляете данные без формы, убедитесь, что вы правильно обрабатываете валидацию. Отправка данных с формой имеет то преимущество, что Django берет на себя заботу о проверке формы, санации и т.д.

Если вы хотите использовать форму, вы можете включить форму в html со скрытыми полями и заполнять эти поля JS по мере установки маркеров. Вероятно, вам понадобится динамический formset, поскольку количество маркеров не фиксировано. Затем вы можете использовать FormData для сериализации полей формы и отправки сериализованных данных в ваш бэкенд Django, который затем может обрабатывать данные стандартным образом.

Без AJAX

В этом случае вы делаете то же самое, что и выше (заполняете скрытые поля данными маркера), но вместо отправки запроса через AJAX будет, например, стандартная кнопка submit.

Вернуться на верх