传单地图需要显示在所有卡片上时仅显示在一张卡片上

如何解决传单地图需要显示在所有卡片上时仅显示在一张卡片上

我有 5 张卡片，我想要一张传单地图将显示在每张卡片上，但它只显示在一张卡片上， 每个地图都从一个数组中取经纬度，数组的索引号由 HTML 填充上的“数据索引”属性获取

---

这是JS填充

const cards = document.querySelectorAll(".card");

const mapInfo = [
  { curesstitle: "Big City",mapLat: 51.505,mapLon: 10 },{ curesstitle: "Food",mapLon: 0 },{ curesstitle: "Nature",{ curesstitle: "Culture",{ curesstitle: "Pepole",];

cards.forEach((cards) => {
  let cardDataIndex = cards.dataset.index;
  console.log(cardDataIndex);
  const mymap = L.map("mapid").setView(
[mapInfo[cardDataIndex].mapLat,mapInfo[cardDataIndex].mapLon],13
  );

  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{
attribution:
  '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',}).addTo(mymap);
});

那我该如何解决呢？或改进它？ 有什么建议吗？

解决方法

我改编了我的 fiddles 中的一个来向您展示一种方法。

这是我在小提琴中初始化我的地图的方法：

const myMaps = [];

function initMap() {
  const myArray = ['first','second'];
  myArray.forEach((element,index) => {
    // set up the map
    const map = new L.Map('map' + index);

    // create the tile layer with correct attribution
    const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    const osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    const osm = new L.TileLayer(osmUrl,{
      minZoom: 8,maxZoom: 15,attribution: osmAttrib
    });

    // start the map 
    map.setView(new L.LatLng(51.503,-0.06),13);
    map.addLayer(osm);
    myMaps.push(map);
    addMarker(element,map);
    createCircles(map);
  })
}

和 html：

<div id='map0' class='map'></div>
<div id='map1' class='map'></div>