如何在framework7中显示传单地图？

Question

我正在使用 Framework7 v. 5.5.1 和 Leaflet 1.9.3 (https://leafletjs.com/),

我无法正确显示地图。

我必须在两个不同的页面上使用地图。

在第一页，我必须全屏查看，但是地图超出了屏幕，我看不到右侧和底部。

似乎有一些 CSS 规则反对 f7 的 CSS

on: {
  pageInit: function(e, page) {

    var map = L.map('map').setView([48.864716, 2.349014], 8);
  }
},

#map {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
}

<div class="page-content">
  <div class="row">
    <div class=" col-100 medium-100 large-50">
      <div class="col">
        <div id="map"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

你的 Leaflet.js 相关代码是可以的，你可以在下面的截图和演示中看到：

而 Stackoverflow 演示代码不支持 Framework7

pageInit

，因此不会在网页上调用该方法。

var map = L.map('map').setView([48.864716, 2.349014], 8);
 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([48.864716, 2.349014])
  .addTo(map)
  .bindPopup('Your Leaflet.js code is ok')
  .openPopup();

#map { 
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
}

<div class="page-content">
    <div class="row">
        <div class="col-100 medium-100 large-50">
           <div class="col">
                 <div id="map"></div>
             </div>
        </div>     
   </div>
</div>

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>