javascript - Leaflet.js 在同一页面上动态多个 map

Question

我正在创建一个网络应用程序，用户可以在其中上传他们自己的 map ，然后在 Bootstrap 导航选项卡中使用 Leaflet.js 显示它们。这是在 Python Flask 应用程序中。

我已经让它工作了，尽管只使用了一个 map 边界等设置。假设我有维斯特洛和中土 map ，为中土 map 计算的边界也将用于维斯特洛 map 。

这是我的代码:

$(document).ready(function(){
    {% for map_file in map_list %}
        var img = new Image();
        img.onload = function(){
            var h = img.height;
            var w = img.width;

            var map = L.map('{{ map_file[1] }}', {
                minZoom: 1,
                maxZoom: 5,
                center: [0,0],
                zoom:1,
                crs: L.CRS.Simple,
            });

            var southWest = map.unproject([0,h], map.getMaxZoom() -1);
            var northEast = map.unproject([w,0], map.getMaxZoom() -1);
            var bounds = new L.LatLngBounds(southWest, northEast);
            {% set map_img_dir = '/static/users/'+user+'/maps/'+map_file[0] %}
            var image = L.imageOverlay('{{ map_img_dir }}', bounds).addTo(map);
            map.setMaxBounds(bounds);
        }
        {% set map_img = 'users/'+user+'/maps/'+map_file[0] %}
        img.src = "{{ url_for('static', filename=map_img) }}"
    {% endfor %}
});

(上下文的小注释，map_list 是带有和不带有扩展名的文件的二维列表，例如 ['middle_earth.jpg','middle_earth'])

我已将此问题归因于 map。我知道对于多个 map 我已经看到每个 map 使用不同的 map 变量，但是由于 map 是动态创建的并且我不确定会有多少 map ，我不确定我将如何实现这个.

我很感激任何帮助/建议。

编辑: 我通过使用 {{ map_file[1] }} 作为变量名而不是 img 解决了这个问题，所以变量名称将类似于 middle_earth 或 westeros。 另一个问题是当我使用滚轮时缩放不是动画的，它非常 block 状并且移动速度非常快？

Answer 1

我通过使用 {{ map_file[1] }} 而不是名称 img 解决了这个问题。另外，我添加了这个，shown here :

{% set map_tab_id = map_file[1]+'-tab-id' %}
$("a[href='#{{ map_tab_id }}']").on('shown.bs.tab', function(e) {
    map.invalidateSize();
});

在 map.setMaxBounds(bounds); 之后解决了 block 状/非动画缩放。

为了完整起见，这是 jinja for 循环中的 map 选项卡 Pane :

<div class="tab-pane fade" id="{{ map_tab_id }}" >
    <div id="{{ map_file[1] }}" style="width:500px; height:500px;"></div>
</div>

map_tab_id 只是 map_file[1](例如 westeros 或 middle_earth)，末尾带有“-tab-id”。