4 python django django-templates django-forms
我正在尝试OSMWidget使用通用CreateVIew模板在表单中显示。
# models.py
class Building(models.Model):
point = PointField('kort markør', null=True)
country = models.CharField('land', max_length=100, blank=True, null=True, default='Danmark')
city = models.CharField('by', max_length=100, blank=True, null=True)
# views.py
from django.contrib.auth.mixins import LoginRequiredMixin
from django.urls import reverse_lazy
from django.views.generic import ListView, CreateView, UpdateView, DeleteView, DetailView
from django.contrib.gis import forms
from .forms import BuildingForm
from .models import Building
class BuildingCreateView(LoginRequiredMixin, CreateView):
form_class = BuildingForm
template_name = 'cms/building_form.html'
# forms.py
from django.contrib.gis.forms import OSMWidget, PointField, ModelForm
from .models import Building
class BuildingForm(ModelForm):
point = PointField(
widget=OSMWidget(
attrs={'map_width': 600,
'map_height': 400,
'template_name': 'gis/openlayers-osm.html',
'default_lat': 57,
'default_lon': 12}))
class Meta:
model = Building
fields = ['city', 'country', 'point']
# buildings_form.html
{% block content %}
<form enctype="multipart/form-data" method="post" action="">
{% csrf_token %}
<ul>
{{ form.as_ul }}
</ul>
<input type="submit" value="Submit"/>
</form>
{% endblock %}
但是地图没有显示在模板中，而只是显示为一个空的 div。如果我检查元素，我可以看到这一点。
# web inspector
<script type="text/javascript">
var map_options = {};
var base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
var options = {
base_layer: base_layer,
geom_name: 'Point',
id: 'id_point',
map_id: 'id_point_map',
map_options: map_options,
map_srid: 3857,
name: 'point'
};
options['default_lon'] = 12;
options['default_lat'] = 57;
options['default_zoom'] = 12;
var geodjango_point = new MapWidget(options);
</script>
并且控制台输出这个错误： ReferenceError: ol is not defined
所以我认为它不会加载 javascript。或者我需要指定 js 在小部件属性中的位置。但是我在文档中找不到任何内容。
我还尝试了以下操作：它从 cloudflare 加载资源，但它抛出 ReferenceError: MapWidget is not defined
# building_form.html
{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css">
{% endblock %}
{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
{% endblock %}
并将其添加到表单媒体类中，但它不会触发模板头部部分中的 js 和 css 并抛出 ReferenceError: ol is not defined
class BuildingForm(ModelForm):
point = PointField(
widget=OSMWidget(
attrs={'map_width': 600,
'map_height': 400,
'template_name': 'gis/openlayers-osm.html',
'default_lat': 57,
'default_lon': 12}))
class Meta:
model = Building
fields = ['project', 'description', 'point']
class Media:
css = {
'all': (
'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css',
'gis/css/ol3.css',
)
}
js = (
'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js',
'gis/js/OLMapWidget.js',
)
但是如果我在控制台中测试媒体的内容，一切都很好：
w = BuildingForm()
>>> print(w.media)
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/gis/css/ol3.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<script type="text/javascript" src="/static/gis/js/OLMapWidget.js"></script>
任何人都可以帮忙吗？我超级困惑。谢谢。
这里要进行一些更改：
在 中buildings_form.html，在模板的头部部分渲染媒体。
<html>
<head>
{{ form.media }}
</head>
<body>
<div id="map">
<form enctype="multipart/form-data" method="post" action="">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
ModelForm像您这样子类化时，还需要将其设置为自定义 CreateView 中的表单类。
class MapCreateView(CreateView):
form_class = MapForm
template_name = 'buildings_form.html'
同样在自定义 ModelForm 中，字段的小部件应在小部件类属性中指定。
class BuildingForm(ModelForm):
class Meta:
model = Building
fields = ('point',)
widgets = {
'point': gis_forms.OSMWidget(
attrs={
'map_width': 800,
'map_height': 500,
}
)
}