Javascript 传单：同一页上有多张地图

我搜索过类似的问题，但没有找到我的案例的答案。 我想与3传单地图，每一个将有不同的内容。出现了两个问题：

• 仅显示第一个
• 缩放和缩放控件仅显示在第三个窗口中

我附加了一个JSFIDLE，以防您能提供帮助

const mapbox = L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
});

mapbox.addTo(mapOne);
mapbox.addTo(mapTwo);
mapbox.addTo(mapThree);

---

谢谢：）

创建一个可重用的mapbox函数，并每次传递map实例：

const mapbox = (map) => {
  return L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
  }).addTo(map)
};

[mapOne, mapTwo, mapThree].forEach(mapInstance => mapbox(mapInstance));

const mapOne=L.map（'mapOne'{
动物控制：错误，
maxZoom:18，
minZoom:6，
}).setView（[40，-4]，6）；
常量mapTwo=L.map（'mapTwo'{
动物控制：错误，
maxZoom:18，
minZoom:6，
}).setView（[40，-4]，6）；
常量maptree=L.map（'maptree'{
动物控制：错误，
maxZoom:18，
minZoom:6，
}).setView（[40，-4]，6）；
//将平铺层添加到地图（Mapbox街道平铺层）
const mapboxToken='pk.eyj1ijoibwwwwym94iiiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjcfig214ariislb6b5aw'；
常量mapboxUrl=https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={token}'；
常量mapboxattribute=[
“映射数据©；贡献者，”，
',',
“图像”，
].加入（“”）；
常量映射框=（映射）=>{
返回L.tileLayer（mapboxUrl{
id:“地图盒。街道”，
令牌：mapboxToken，
属性：MapboxAttribute，
}).addTo（地图）
};
[mapOne，mapTwo，mapThree].forEach（mapInstance=>mapbox（mapInstance））；
//向地图添加缩放控件
const zoomControl=新的L.Control.Zoom({
位置：'左上'
});
zoomControl.addTo（mapOne）；
zoomControl.addTo（地图二）；
zoomControl.addTo（地图三）；
//加一个刻度
const scaleControl=L.control.scale({
最大宽度：200，
公制：对，
帝国：错，
位置：'右下'
});
scaleControl.addTo（mapOne）；
scaleControl.addTo（map2）；
scaleControl.addTo（maptree）；
//向地图添加全屏控件（插件）
addControl（新的L.Control.Fullscreen（））；
addControl（新的L.Control.Fullscreen（））；
addControl（新的L.Control.Fullscreen（））
#mapOne，
#地图二，
#地图三{
宽度：80%；
高度：500px；
边缘顶部：10px；
}

旅游-普雷西卡
可能的副本请参见我标记的副本。您需要为每个地图实例创建一个单独的
L.Layer
对象。我尝试了该解决方案，但不适用于我。