如何在表单中使用 GeoDjango Pointfield？答案

【问题标题】：How to use GeoDjango Pointfield in Form?如何在表单中使用 GeoDjango Pointfield？
【发布时间】：2014-12-04 23:32:07
【问题描述】：

我想知道如何使用从 Django 表单自动生成的 PointField 小部件。

我为此使用通用视图 (CreateView)

这就是我的模型的样子。

from django.contrib.gis.db import models

class Post(models.Model):
    title = models.CharField(max_length=60)
    text = models.CharField(max_length=255)
    location = models.PointField(geography=True, null=True, blank=True)
    objects = models.GeoManager()

然后会自动为我生成表单，我只是在我的视图中调用它。因此：

这是那段代码的输出。

<form method="post">
  <input type='hidden' name='csrfmiddlewaretoken' value='wVZJIf7098cyREWe3n3jiZinPdbl8nEe' />
  <p><label for="id_title">Title:</label> <input id="id_title" maxlength="60" name="title" type="text" /></p>
<p><label for="id_text">Text:</label> <input id="id_text" maxlength="255" name="text" type="text" /></p>
<p><label for="id_location">Location:</label> <style type="text/css">
    #id_location_map { width: 600px; height: 400px; }
    #id_location_map .aligned label { float: inherit; }
    #id_location_div_map { position: relative; vertical-align: top; float: left; }
    #id_location { display: none; }
    .olControlEditingToolbar .olControlModifyFeatureItemActive {
        background-image: url("/static/admin/img/gis/move_vertex_on.png");
        background-repeat: no-repeat;
    }
    .olControlEditingToolbar .olControlModifyFeatureItemInactive {
        background-image: url("/static/admin/img/gis/move_vertex_off.png");
        background-repeat: no-repeat;
    }
</style>

<div id="id_location_div_map">
    <div id="id_location_map"></div>
    <span class="clear_features"><a href="javascript:geodjango_location.clearFeatures()">Delete all Features</a></span>

    <textarea id="id_location" class="vSerializedField required" cols="150" rows="10" name="location"></textarea>
    <script type="text/javascript">
        var map_options = {};
        var options = {
            geom_name: 'Point',
            id: 'id_location',
            map_id: 'id_location_map',
            map_options: map_options,
            map_srid: 4326,
            name: 'location'
        };

        var geodjango_location = new MapWidget(options);
    </script>
</div>
</p>
  <input type="submit" value="Create" />
</form>

在 head 标签中，我从中导入了一个 OpenLayers 脚本 http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js

但是，该页面不会显示点域的任何内容。（其他字段工作正常）。

在 chromedevtools 中显示此错误

Uncaught ReferenceError: MapWidget is not defined

对于这行代码

var geodjango_location = new MapWidget(options)

基本上我想知道我是否应该链接到其他 javascript 库，或者我是否缺少其他东西？

我已经浏览过 GeoDjango 表单的文档，但不知道还有什么可以尝试的 https://docs.djangoproject.com/en/dev/ref/contrib/gis/forms-api/

【问题讨论】：

标签： django openlayers geodjango

【解决方案1】：

将此添加到头部：

<head>
  {{ form.media }}
</head>

【讨论】：

【解决方案2】：

我的管理 UI 存在相关问题。我的解决方案只是您的问题的参考。 Firefox 浏览器阻止了混合 http/https http://openlayers.org/api/2.13/OpenLayers.js 的加载，因为我的 geodjango 网站强制使用 https。

一种解决方案是将 OpenLayer.js 下载到我的 geodjango 项目静态目录中，并将以下行添加到我的 CustomGeoModelAdmin：

MyCustomGeoModelAdmin 类（....）： openlayers_url = '/static/mygeodjangoproject/OpenLayers.js' @财产定义媒体（自我）： “将 OpenLayers JavaScript 注入管理员。” media = super(MyCustomGeoModelAdmin, self).media media.add_js([self.openlayers_url]) 返回媒体

瞧，我的管理站点现在显示点字段的地理地图。

【讨论】：

感谢 Ben 修复了我的法语 ;-)