Javascript 传单.js在同一页面上动态显示多张地图

我正在创建一个web应用程序，用户可以上传自己的地图，然后在Bootstrap导航选项卡中显示它们。这在Python Flask应用程序中

我已经让它工作，虽然只有一个地图的边界设置等使用。比如说，如果我有一张Westeros和中土地图，中土地图计算的边界也会用于Westeros地图

这是我的密码：

$(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_file[1]}

作为变量名，而不是

img

，解决了这个问题，所以变量名类似于

middle_earth

或

westeros

。另一个问题是，当我使用滚轮时，缩放没有设置动画，它非常块状并且速度非常快。

我使用

{{map_file[1]}

而不是名称

img

解决了这个问题。此外，我还添加了以下内容：

在

map.setMaxBounds（bounds）之后解决了块状/非动画缩放问题

为完整起见，这是jinja For循环中的映射选项卡窗格：

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



其中
map\u tab\u id
只是
map\u文件[1]
（例如，westeros或middle\u earth）的末尾带有“-tab id”。
可能是
img
变量在同一范围内重复使用的问题。
<div class="tab-pane fade" id="{{ map_tab_id }}" >
    <div id="{{ map_file[1] }}" style="width:500px; height:500px;"></div>
</div>