javascript - 在同一页面上显示 3 个传单 map

Question

我遵循了许多关于在同一页面上显示两个传单 map 的教程。我的最终目标是拥有一个 php 文件，我可以将地址传递给它，它会返回一个带有 map 的 div，但现在我只是想让 3 个 map 出现在同一页面上。它可以与两个一起使用，但不能与三个一起使用，我要秃头试图解决这个问题!关于为什么会显示前两张 map 而不是第三张 map ，有什么想法吗？

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas"></div>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas2"></div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas3"></div>
</div>
</div>

<script>
var firefoxIcon = L.icon({
iconUrl: 'pin2.png',
iconAnchor: [14, 48]
});

var map = L.map('map_canvas').setView([40.744996, -73.983761], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var marker = L.marker([40.744996, -73.983761], {icon: firefoxIcon}).addTo(map);

var map2 = L.map('map_canvas2').setView([38.895856, -77.009787], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map2);
var marker = L.marker([38.895856, -77.009787], {icon: firefoxIcon}).addTo(map2);

var map3 = L.map('map_canvas3').setView([40.870100, -73.458890], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map3);
var marker = L.marker([40.870100, -73.458890], {icon: firefoxIcon}).addTo(map3);
</script>

Answer 1

试试这个。将类“map”添加到“map_canvas”元素。

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas"></div>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas2"></div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas3"></div>
</div>
</div>

<script>
var firefoxIcon = L.icon({
iconUrl: 'pin2.png',
iconAnchor: [14, 48]
});

var map = L.map('map_canvas').setView([40.744996, -73.983761], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var marker = L.marker([40.744996, -73.983761], {icon: firefoxIcon}).addTo(map);

var map2 = L.map('map_canvas2').setView([38.895856, -77.009787], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map2);
var marker = L.marker([38.895856, -77.009787], {icon: firefoxIcon}).addTo(map2);

var map3 = L.map('map_canvas3').setView([40.870100, -73.458890], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map3);
var marker = L.marker([40.870100, -73.458890], {icon: firefoxIcon}).addTo(map3);
</script>

然后在您的 css 文件中添加此样式:

.map {
    height: 500px;
    width: 80%;
    padding: 10px
}

它会起作用的。在 jfiddle 中测试。