如何使用 Leaflet.js 动态生成地图？
How do I dynamically generate maps with Leaflet.js?
我正在尝试使用 Leaflet.js 在网站中实现地图，但我 运行 遇到了问题。我能找到的每个教程都会将一个 ID 传递给 Leaflet 地图函数，如下所示：
在HTML中：
<div id="mapid"></div>
在JavaScript中：
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
我正在使用的网站有一个搜索功能，可以查询数据库，然后 returns 匹配组织的列表。大多数（但不是全部！）组织都有一个与之关联的地址，我正在尝试为每个地址生成一个地图。
所以，我不能有一个带 ID 的 div（因为我需要多个 div），而且我不能只将它们命名为“map1”、“map2” ，“map3”等，因为它是动态的：每次需要的地图数量都不同。
现在，在搜索结果模板中，我有一张地图 div，其 CLASS 为“地图”，但我无法让 Leaflet 使用它。
如何让 Leaflet 在这种情况下工作（使用 class 而不是 ID）？
Leaflet 文档显示 L.map 工厂的第一个参数可以直接是一个 HTML 元素（而不是表示元素 ID 的字符串）：
https://leafletjs.com/reference-1.7.1.html#map-l-map
L.map(<HTMLElement> el, <Map options> options?)
Instantiates a map object given an instance of a <div> HTML element
这样一来，您就不必选择任何唯一 ID，只需使用刚刚创建的元素构建地图即可。
我正在尝试使用 Leaflet.js 在网站中实现地图，但我 运行 遇到了问题。我能找到的每个教程都会将一个 ID 传递给 Leaflet 地图函数，如下所示：
在HTML中：
<div id="mapid"></div>
在JavaScript中：
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
我正在使用的网站有一个搜索功能，可以查询数据库，然后 returns 匹配组织的列表。大多数（但不是全部！）组织都有一个与之关联的地址，我正在尝试为每个地址生成一个地图。
所以，我不能有一个带 ID 的 div（因为我需要多个 div），而且我不能只将它们命名为“map1”、“map2” ，“map3”等，因为它是动态的：每次需要的地图数量都不同。
现在，在搜索结果模板中，我有一张地图 div，其 CLASS 为“地图”，但我无法让 Leaflet 使用它。
如何让 Leaflet 在这种情况下工作（使用 class 而不是 ID）？
Leaflet 文档显示 L.map 工厂的第一个参数可以直接是一个 HTML 元素（而不是表示元素 ID 的字符串）：
https://leafletjs.com/reference-1.7.1.html#map-l-map
L.map(<HTMLElement> el, <Map options> options?)Instantiates a map object given an instance of a
<div>HTML element
这样一来，您就不必选择任何唯一 ID，只需使用刚刚创建的元素构建地图即可。