Javascript 是否可以在单个HTML页面中包含多个传单/地图框地图？

我正在开发一个单页应用程序，该应用程序有两个类似以下内容的地图：

标记：

<div id = "page1>
  <div id='map'></div>
</div>

<div id = "page2>
  <div id='map2'></div>
</div>

  L.mapbox.accessToken = 'pk.eyJ1IjoicmV5bmVyb25nIiwiYSI6ImNpZzB2ZWs4MDBpdG90emt2ZjZ0bHI5dWEifQ.sP6kg2gGfN7NBAOYRasyeA';
  var map = L.mapbox.map('map', 'mapbox.streets');
  var map2 = L.mapbox.map('map2', 'mapbox.streets');

---

但是，执行此操作时地图不起作用。有没有办法做到这一点，或者在一个HTML页面中不可能有多个传单/mapbox映射？

我相信如果将脚本放在一个包含它们的div中，脚本会发生冲突。可能有一种方法可以操纵脚本来工作。解决这些问题的一种方法是检查并确认

map2的脚本中没有提到“map”，因为这可能会导致冲突。
我相信如果将脚本放在一个包含它们的div中，脚本将发生冲突。可能有一种方法可以操作脚本以使其正常工作。解决这些问题的一种方法是检查并确认
map2的脚本中没有提到“map”，因为这可能会导致冲突。
您的代码应该可以：

确保您已为
#map
和
#map2
div容器正确设置CSS大小（
高度
至少，
宽度
，如果可能）。
您的代码应该可以：

确保已为
#map
和
#map2
div容器正确设置CSS大小（
高度
，如果可能，至少，
宽度
）。确保您的HTML语法正确（看起来在
page1
和
page2
id之后缺少引号
”
。刚刚选中，在stackoverflow中键入时出现错误。问题是map1本身工作正常，但在添加行
map2=L.mapbox.map（'map2'，mapbox.streets'））；
整个过程都停止了。它应该可以工作。请确保您的HTML语法正确（看起来您缺少引号
）
在刚刚选中的
page1
和
page2
id之后，将其输入stackoverflow时出现错误。问题是map1本身工作正常，但在添加行
map2=L.mapbox.map（'map2'，'mapbox.streets'）；
整个过程停止工作