是否可以在单个HTML页面中包含多个传单/地图集映射？

Question

我正在开发一个单页应用程序，它有两个看起来像这样的地图：

标记：

<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页面中有多个传单/地图集地图？

Answer 1

我相信如果你把它们放在一个包含div的脚本中，它们会发生冲突。可能有一种方法可以操作脚本来工作。解决这些问题的一种方法是在map2的脚本中检查一下，确保＆＃39;映射＆＃39;没有提到，因为这可能会导致冲突。

Answer 2

您的代码应该有效：https://jsfiddle.net/rfrq9f1g/

确保您为height和width div容器正确设置了CSS大小（#map，#map2，如果可能）。