2014-12-04 39 views
3

我想知道如何使用從Django表單自動生成的PointField小部件。如何在表單中使用GeoDjango 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.as_p}}

這是一段代碼的輸出。

<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

然而,網頁不會顯示在pointfield什麼。 (其他領域工作得很好)。

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

回答

10

添加這頭部分:

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

我有一個相關的問題我的管理界面。我的解決方案僅僅是您的問題的參考。 Firefox瀏覽器阻止加載混合http/https http://openlayers.org/api/2.13/OpenLayers.js,因爲我的geodjango網站強制https。

一種解決方案是將OpenLayer.js下載到我的GeoDjango內置項目靜態目錄,並將以下行添加到我的CustomGeoModelAdmin:

 
class MyCustomGeoModelAdmin(....): 
    openlayers_url = '/static/mygeodjangoproject/OpenLayers.js' 

    @property 
    def media(self): 
     "Injects OpenLayers JavaScript into the admin." 
     media = super(MyCustomGeoModelAdmin, self).media 
     media.add_js([self.openlayers_url]) 
     return media 

就萬事大吉了,我的管理站點現在顯示一個點的地理地圖領域。

+0

感謝Ben修復我的法語;-) – 2016-05-23 11:05:34