javascript - 从 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()}

它以正常方式从 View 实例化。

在模板中；-

        {% crispy annotation_form %}

现在。在主体加载开始时，它隐藏了包含 map 的 div，在其他地方有一些代码本质上是监视 annotationType 下拉列表，如果选择了“location”，它会取消隐藏 div。

问题是，似乎 leafletjs 不喜欢被实例化隐藏，并且似乎对其边界有点困惑。我假设答案是在 map 上调用 _onresize()，但是我似乎无法找到如何获取对 map 实例的引用。

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

..只是提示 map 已经初始化。检查表单生成的代码似乎在 (function() { etc etc } )() 类型的闭包中创建了 map ，这使得从那里劫持变量变得不可行。

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

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

Answer 1

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

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

$(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()
    });
});

无论如何，这对我来说是有效的。虽然它没有设置 map 的缩放/范围/边界，但我仍然需要弄清楚如何做到这一点。