Django 如何添加'';画一个标记;控制传单地图和捕获事件?
我想创建一个带有传单的地图,并让用户有机会从用户界面向该地图添加标记。用户应该标记一个点(从市场到地图)。然后,当设置点时,我想获得该标记的位置(坐标)并执行其他操作。它应该只允许一个标记Django 如何添加'';画一个标记;控制传单地图和捕获事件?,django,leaflet,django-leaflet,Django,Leaflet,Django Leaflet,我想创建一个带有传单的地图,并让用户有机会从用户界面向该地图添加标记。用户应该标记一个点(从市场到地图)。然后,当设置点时,我想获得该标记的位置(坐标)并执行其他操作。它应该只允许一个标记 我想要这个结果传单《快速入门指南》中有一个关于处理事件的章节 在这里,您可以看到单击地图时添加弹出窗口的示例: var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .se
我想要这个结果传单《快速入门指南》中有一个关于处理事件的章节 在这里,您可以看到单击地图时添加弹出窗口的示例:
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
我们需要修改此函数以添加标记:
var marker = L.marker();
function onMapClick(e) {
marker
.setLatLng(e.latlng)
.addTo(mymap);
}
mymap.on('click', onMapClick);
为此,我必须为location字段(Point)定义一个小部件,并使用mesa类向表单中添加一些javascript
class WorkerForm(forms.ModelForm):
class Meta:
model = WorkerModel
exclude = ("id",)
widgets = {
'name':forms.TextInput(attrs={'class': 'form-control'}),
'location': LeafletWidget(),
'last_name1' : forms.TextInput(attrs={'class': 'form-control'}),
'last_name2' : forms.TextInput(attrs={'class': 'form-control'}),
'identification':forms.TextInput(attrs={'class': 'form-control'}),
'birthday_date' :forms.DateInput(attrs={'class': 'form-control datepicker', 'autocomplete': 'off'}),
'address' : forms.TextInput(attrs={'class': 'form-control'}),
'municipality_id' : ModelSelect2Widget(model=MunicipalityModel, queryset=MunicipalityModel.objects.filter(),
search_fields=['municipio__icontains'],
dependent_fields={'province_id': 'cod_prov'},
attrs={'style': 'width: 100%;'}),
'province_id' : ModelSelect2Widget(model=ProvinceModel, queryset=ProvinceModel.objects.filter(),
search_fields=['des_prov__icontains'],
attrs={'style': 'width: 100%;'}),
}
class Media:
js = ('form_media/worker_form.js',)
worker_form.js
// Wait for the map to be initialized
$(window).on('map:init', function(e) {
map = e.originalEvent.detail.map;
map.on('draw:created', function (e) {
const coordinates = e.layer._latlng;
call_ajax(coordinates);
});
map.on('draw:edited', function (e) {
var layers =e.layers._layers
var coordinates;
Object.keys(layers).forEach(function(key) {
coordinates = layers[key]._latlng;
//console.log(coordinates)
});
call_ajax(coordinates);
});
function call_ajax(coordinates)
{
$.ajax({
type: "GET",
url: "/riesgo/trabajador/provincia_municipio/ajax/",
data: {
'lat': coordinates.lat,
'lng': coordinates.lng,
},
dataType: "json",
success: function (response) {
$('#id_province_id').val(response.province_id); // Select the option with a value of '1'
$('#id_province_id').trigger('change'); // Notify any JS components that the value changed
},
error: function (rs, e) {
console.log('ERROR obteniendo el bounding box');
}
});
}
});
这回答了你的问题吗?我在下面的帖子中找到了一个解决方案:他使用了标签django和django传单。他的问题是关于如何在Django中做到这一点。来自Django传单文档:“您可以像往常一样使用传单API”。不如你告诉他怎么在django做,我已经做了