如何以角度在页面上创建多个传单地图答案

【问题标题】：How to create the multiple leaflet maps on the page in angular如何以角度在页面上创建多个传单地图
【发布时间】：2021-04-07 18:24:46
【问题描述】：

我已经创建了下面给出的传单开放街道地图。

.component.ts

 map = L.map('map').setView([12.876, 80.599], 12);  

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

我已将地图放置在 html 页面中，如下所示

.component.html

<div class ="row">
<div class="col-xs-12 col-sm-8 col-lg-7">
    <div id="map"></div>
  </div>
</div>

并提到css中的高度

.component.css

#map{
  height: 650px;
  border: 1px solid gray;
   position: relative;
  border: none;
}

现在我想在页面中创建两个地图，我尝试过但无法创建地图，因为我使用了名称地图的id。

那么如何将 id 值（映射）更改为类，而不是我将使用该类在页面

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/25293579/…
不，他们已经创建了两个 id 值，但我想动态创建两个以上的地图
您想创建没有任何占位符的动态地图？
是的，我要创建动态地图

标签： angular leaflet openstreetmap react-leaflet angular-leaflet-directive

【解决方案1】：

我可能会使用相同的 L.map 实例，并对其进行必要的更改。另一种方法是创建另一个具有不同 ID 的 DOM，并使用 [hide] 显示第一张或第二张地图。

【讨论】：