谷歌地图缩放按钮不显示在窄屏幕上

Question

在图像上看起来非常棘手，因为它们看起来大小相似，但是当我在Chrome中调整我的开发者窗口大小以使我的谷歌地图窗口改变大小时，缩放按钮就会丢失。

这是我的CSS代码

.mapContainer
{
    position: relative;
    padding-bottom: 25%; 
}
.mapContainer .mapCanvas
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

我在这里做错了什么？

修改 在这里小提琴：http://jsfiddle.net/68jm4no9/

Answer 1

看起来缩放图标不大。当地图的高度降低到极限时，缩放图标将被删除，因为它们没有空间可供显示。

因此，请向地图div添加静态高度。

.mapCanvas {

    height: 150px;
}

此处： http://jsfiddle.net/68jm4no9/7/

否则，您可以使用两个自定义按钮进行缩放功能，并使用JavaScript来实现它。

Answer 2

默认情况下，对于小于200px的地图设置。你可以覆盖它。

在地图选项集zoomControl: true

中

EG

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: true,
    scaleControl: true
  });
}

这是the doc。

Answer 3

cat(db._adminCommand({getCmdLineOpts: 1}).parsed.config);

zoomControl 将允许您覆盖大小