从 django-leaflet 表单获取对 Leafletjs 实例的引用

Question

使用 django-leaflet 我创建了如下表单

class AnnotationForm(forms.ModelForm):
     <crispy forms stuff redacted from here for brevity>     

    class Meta:
        model = Annotation # Your user model
        fields= ['name','annotationType','description','location_point','document','e']
        widgets = {'location_point': LeafletWidget(),'e':forms.HiddenInput()}

它以正常方式从视图中实例化。

在模板中；-

        {% crispy annotation_form %}

现在。在开始加载正文时，它会隐藏包含地图的 div，而在其他地方有一些代码基本上会监视 annotationType 下拉列表，如果选择了“位置”，它会取消隐藏 div。

问题是，leafletjs 似乎不喜欢被实例化隐藏，并且似乎对它的界限有点​​困惑。因此，我假设答案是在地图上调用 _onresize()，但是我似乎找不到如何获取对地图实例的引用。

L.map('id_annotation_location_point_map')._onResize()

..只是产生一个地图已经初始化的抱怨。检查表单生成的代码似乎是在 (function() { etc etc } )() 类型闭包内创建的地图，这使得从那里劫持变量是不可行的。

所以我的问题是，在这种情况下如何获得对 leaflet.js 地图的引用？

有How can I get a leaflet.js instance using only a DOM object?，但它似乎并没有真正回答这个问题，只是提出一个在我的情况下不可用的替代方案。

Answer 1

我遇到了完全相同的问题 - 使用 django-leaflet 在隐藏的 div 中渲染地图，但无法弄清楚如何触发 _onResize/invalidateSize 函数。

我不知道这是一个特别好的解决方案，但我所做的是从 map:init 事件中获取对地图的引用，如下所示：

$(document).ready(function() {
    // Store the variable to hold the map in scope
    var map;
    
    // Populate the map var during the map:init event (see Using Javascript callback function)
    // here https://github.com/makinacorpus/django-leaflet
    $(window).on('map:init', function(e) {
      map = e.originalEvent.detail.map;
    });

    // Hide the map
    $('#hiddenDivWithMap').hide();

    // Click the thing which shows the map
    $('#myButton').click(function() {
      $('#hiddenDivWithMap').show();
      map.invalidateSize()
    });
});

不管怎样，这对我有用。虽然它没有设置地图的缩放/范围/边界，但我仍然需要弄清楚如何做到这一点。