Как центрировать формы листовки в шаблоне Django - PullRequest
Новая
       86

Как центрировать формы листовки в шаблоне Django

0 голосов
/ 20 января 2020

после 2 дней, пытаясь сделать это самостоятельно, мне нужна помощь, пожалуйста

Я использую Geo Django и Leaflet. У меня есть «листинг» модели с полем location как PointField, моя форма использует LeafletWidget, как показано ниже. Как оно есть, оно работает, но когда я создаю новый листинг, в location ничего нет, поэтому он показывает карту мира по умолчанию. Я хотел бы в своем шаблоне настроить следующее:

CENTER: ({{user.lat}}, {{user.lng}}) и масштаб: 10

, поскольку я знаю, что Новый список будет в том же географическом районе, что и пользователь. И я понятия не имею, как это сделать !!!

Model.py 

location = models.PointField(null=True, blank=True)

forms.py 

from leaflet.forms.fields import PointField
from leaflet.forms.widgets import LeafletWidget
...
LEAFLET_WIDGET_ATTRS = {
    'map_height': '600px',
    'map_width': '50%',
    'display_raw': 'true',
    'map_srid': 4326,
}
...
class ListingForm(forms.ModelForm):
    required_css_class = 'required'
...

    location = forms.PointField(
        widget=LeafletWidget(attrs=LEAFLET_WIDGET_ATTRS))
...

шаблон. html 

      <!-- form start -->
            <form action="{% url 'listing_new' %}" method="POST" class="listing-form" role="form" novalidate enctype="multipart/form-data" id="listingform">
                {% csrf_token %}
                <div class="box-body">
                {{ form.non_field_errors }}
                {% for field in listingform %}
                   <div class="fieldWrapper form-group {% if field.errors %} field_error{% endif %} ">
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}{% if field.field.required %}<span class="required-asterisk">*</span>{% endif %}
                        </label>
                        {{ field }}
                        {% for error in field.errors %}
                          <span class="help-block">{{ error }}</span>
                        {% endfor %}
                   </div>
                {% endfor %}
                </div>
              <div class="box-footer">
                <button type="submit" class="btn btn-primary" form="listingform">Submit</button>
              </div>
            </form>

Я пытался использовать следующее: 

<script type="text/javascript">
    window.addEventListener("map:init", function (e) {
        var detail = e.detail;
        detail.options.djoptions['center']=[{{ listing_lat }}, {{ listing_lng }}];
        detail.options.djoptions['zoom']=10;
        console.log(detail.options);
        console.log(detail.loadmap);
    }, false);

</script>

НО это не изменяет код, автоматически сгенерированный виджетом листовки: 

<div id="id_location-map" class="leaflet-container-default"></div>
<script type="text/javascript">
(function () {

    function loadmap() {
        var djoptions = {"srid": null, "extent": [[-90, -180], [90, 180]], "fitextent": true, "center": null, "zoom": null, "minzoom": null, "maxzoom": null, "layers": [["OSM", "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "\u00a9 <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"]], "overlays": [], "attributionprefix": null, "scale": "metric", "minimap": false, "resetview": true, "tilesextent": []},
            options = {djoptions: djoptions, initfunc: loadmap,
                       globals: false, callback: id_location_map_callback},
            map = L.Map.djangoMap('id_location-map', options);

    }
    var loadevents = ["load"];
    if (loadevents.length === 0) loadmap();
    else if (window.addEventListener) for (var i=0; i<loadevents.length; i++) window.addEventListener(loadevents[i], loadmap, false);
    else if (window.jQuery) jQuery(window).on(loadevents.join(' '), loadmap);

})();
</script>

Ответы [ 3 ]

0 голосов
/ 21 января 2020

Итак, решение состоит в том, чтобы добавить этот кусок JS в шаблон: 

<script type="text/javascript">
    window.addEventListener("map:init", function (e) {
        var detail = e.detail;
        detail.map.setView([{{user_lat}},{{user_lng}}], 10);
    }, false);

</script>
0 голосов
/ 28 января 2020

В ваших Django .settings файлах добавьте следующие строки: 

LEAFLET_CONFIG = { 'DEFAULT_CENTER': (41.25 ,20), # Latitude ,  Longitude 
'DEFAULT_ZOOM': 8,
'MAX_ZOOM': 28,
'MIN_ZOOM': 1,
'SCALE':'both',
'TILES': [], }
0 голосов
/ 20 января 2020

в простом JS, вы бы настроили его как: 

map.setView([{{ user.lat }}, {{ user.lng }}], 10);

Но с Geo Django вы можете попробовать: 

LEAFLET_WIDGET_ATTRS = {
    'map_height': '600px',
    'map_width': '50%',
    'display_raw': 'true',
    'map_srid': 4326,
}

LEAFLET_CONFIG {
    'DEFAULT_CENTER': ({{ user.lat }}, {{ user.lng }}),
    'DEFAULT_ZOOM': 10,
}

См. Эту документацию: https://buildmedia.readthedocs.org/media/pdf/django-leaflet/latest/django-leaflet.pdf

...