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

Is it possible to contain more than one leaflet/mapbox map in a single HTML page?

本文关键字：地图 包含多 单个 HTML 是否      更新时间：2023-09-26

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

标记： 

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

我相信如果你

把它们放在一个包含div 的脚本中，它们会发生冲突。可能有一种方法可以操作脚本以使其工作。修复它们的一种方法是在脚本中检查并检查它map2以确保未提及"map"，因为这可能会导致冲突。

你的代码应该可以工作：https://jsfiddle.net/rfrq9f1g/

确保您已正确设置#map和#map2div 容器的 CSS 大小（至少height，width如果可能的话）。

相关文章：