Quiero crear una aplicación web con django donde el usuario pueda crear un marcador en un mapa. Tengo este script js para agregar un marcador haciendo clic en un mapa de folleto.
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: '© <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]) } } }; } }Los marcadores se guardan en la matriz de lista de marcadores. ¿Cómo es posible guardar estos marcadores en un modelo Django? ¿Tengo que poner una etiqueta de secuencia de comandos en la plantilla html y luego hacer algunas cosas de django o hay otra solución?
Gracias
Tu pregunta es bastante amplia. Entonces, en lugar de escribir el código para todas las partes que se necesitan (modelo, vista, url, plantilla, script js), proporcionaré un esquema, que puede usar para reducir aún más el problema.
Según la lógica de su aplicación y sus preferencias, sus datos deben enviarse mediante AJAX o como un formulario de envío. Use AJAX si necesita que los datos se envíen sin una "actualización de página". Si el usuario no realiza una acción de envío final, entonces AJAX sin duda será mejor desde la perspectiva de la experiencia del usuario.
AJAX
Hay muchos recursos en línea que explican cómo usar AJAX con Django. Por ejemplo,
Consulte también la documentación detallada de Django sobre cómo incluir el token CSRF en una solicitud AJAX.
Una decisión que tienes que tomar es si quieres enviar los datos con un formulario o no. Si envía los datos sin el formulario, asegúrese de manejar la validación correctamente. Enviar los datos con un formulario tiene la ventaja de que Django se encarga de la validación del formulario, desinfección, etc.
Si desea utilizar un formulario, puede incluir el formulario en su html con campos ocultos y completar esos campos con JS a medida que se establecen los marcadores. Probablemente necesitará un formset dinámico, ya que la cantidad de marcadores no es fija. Luego puede usar FormData para serializar los campos del formulario y enviar los datos serializados a su backend de Django, que luego puede manejar los datos de la manera estándar.
Sin AJAX
En este caso, haga lo mismo que arriba (rellene los campos ocultos con los datos del marcador), pero en lugar de enviar la solicitud a través de AJAX, habría, por ejemplo, un botón de envío estándar.