个人中心
gpt4 book ai didi

python - OSMWidget - map 未显示在模板中 - ReferenceError : ol is not defined

转载 作者：行者123 更新时间：2023-12-01 02:23:04 26 4
gpt4 key购买 nike

我正在尝试使用通用 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)
<小时/> 
# 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 %}
<小时/>

但是 map 不会显示在模板中，而只是显示为空 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 Define

所以我认为它没有加载 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 %}

并将其添加到表单媒体类中，但它不会触发模板 head 部分中的 js 和 css 并抛出 ReferenceError: ol is not Define

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>

有人可以帮忙吗？我 super 困惑。谢谢。

最佳答案

此处需要进行一些更改:

在buildings_form.html中，在模板的 head 部分渲染媒体。

<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,
                }
            )
        }

关于python - OSMWidget - map 未显示在模板中 - ReferenceError : ol is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47750850/

26 4 0
文章推荐： python - python中的networkx用于删除节点
文章推荐： python - Pandas:应用函数:TypeError:不支持的操作数类型 -: 'unicode' 和 'unicode'
文章推荐： python - 根据值数组的条件在 pandas 中分配值
文章推荐： python - 使用 Python lmfit 进行曲线拟合的参数估计
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com