传单无法正确缩放到移动设备

Posted 2023-03-22

【中文标题】传单无法正确缩放到移动设备

【英文标题】：Leaflet not scaling correctly to mobile devices

【发布时间】：2022-01-21 00:21:57

【问题描述】：

我在缩放传单地图以适应移动设备时遇到问题。我正在使用 React、Leaflet(+React-Leaflet) 和 OpenStreetMaps 构建应用程序。

如果我在屏幕底部放置页脚或缩放控件等组件，它们会显示为一半或根本不显示，因为它们隐藏在移动设备菜单后面。

这是一个例子。

Web version

Mobile version

在这种情况下，缩放控制组件根本不会出现在移动版本中。例如，如果我将地图高度属性更改为 90vh，它会再次出现。

Mobile version with 90vh

当然现在它可以工作了，但是看起来很丑而且没有响应。我该如何解决这个问题？

我关注了这个example，但它似乎没有帮助。

【参考方案1】：

我解决了这个问题。如果将来其他人也遇到同样的问题，这是我的解决方案。

当您向 Map 组件添加 css 属性时，不要使用“height: 100vh;”，而是使用“height: 100%;”如example 所示。您应该使用设置为固定位置或绝对位置的包装容器以使高度 100% 正常工作。这是一个例子：

渲染地图组件

  <div className="map-wrapper">
    <Map/>
  </div>

CSS

.map-wrapper 
  width: 100%;
  height: 100%;
  position: fixed;


.map 
  width: 100%;
  height: 100%;
  position: relative;