Python OSMWidget-map不'；未在模板中显示-引用错误：未定义ol_Python_Django_Django Forms_Django Templates

Python OSMWidget-map不'；未在模板中显示-引用错误：未定义ol

python django

Python OSMWidget-map不'；未在模板中显示-引用错误：未定义ol,python,django,django-forms,django-templates,Python,Django,Django Forms,Django Templates,我正在尝试使用genericCreateVIew模板以表单的形式显示OSMWidget # 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.

我正在尝试使用generic

CreateVIew

模板以表单的形式显示

OSMWidget

# 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)

并将其添加到forms media类中，但它不会触发模板头部的js和css，并抛出

ReferenceError:ol未定义

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>

w=BuildingForm（）
>>>印刷品（w.media）

有人能帮忙吗？我非常困惑。

谢谢

此处需要做一些更改：

在

buildings\u 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>

同样在自定义模型表单中，字段的小部件应该在小部件类属性中指定

class BuildingForm(ModelForm):
    class Meta:
        model = Building
        fields = ('point',)
        widgets = {
            'point': gis_forms.OSMWidget(
                attrs={
                    'map_width': 800,
                    'map_height': 500,
                }
            )
        }

非常感谢您@oluwafemi__èe您是一位圣人。刚从那{{form.media}出来就很精彩。！只有将django/contrib/gis/static/gis/js/OLMapWidget.js中的js/OLMapWidget.js复制到我的静态目录以及直接从模板指向它的链接中，我才能让它工作。

# 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 %}

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>

<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>

class MapCreateView(CreateView):
    form_class = MapForm
    template_name = 'buildings_form.html'

class BuildingForm(ModelForm):
    class Meta:
        model = Building
        fields = ('point',)
        widgets = {
            'point': gis_forms.OSMWidget(
                attrs={
                    'map_width': 800,
                    'map_height': 500,
                }
            )
        }