如何更改 Google Maps API 控件的大小？答案

【问题标题】：How to change the size of Google Maps API controls?如何更改 Google Maps API 控件的大小？
【发布时间】：2019-01-23 20:22:45
【问题描述】：

Google Maps API 显着增加了默认地图控件（地图类型、缩放、全屏等）的大小。如何更改它们的大小？

【问题讨论】：

这怎么太宽泛了？
这不是太宽泛、重复且质量非常低的问题吗？
Huge Google Maps Controls (Possible Bug?)的可能重复
重复的问题实际上是“可能的错误？”和“还有其他人遇到同样的问题吗？”而不是“如何更改大小？”。尽管它也对第二个固有问题产生了相关答案。我不想知道它是否是一个错误（它不是），但我正在寻找如何改变大小的解决方案。所以这对我来说是一个相关的问题！

标签： google-maps

【解决方案1】：

您可以在创建地图时通过在选项中设置controlSize来设置控件的大小。

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
    controlSize: 20,
  });
}

#map {
  width: 300px;
  height: 200px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>
<div id="map"></div>

【讨论】：

【解决方案2】：

您无法更改地图控件的大小，但您可以创建自定义控件/视图并处理它们的点击以执行所需的任务。例如。创建放大/缩小控件，然后设置它们的点击监听器，

    fabZoomIn.setOnClickListener(this);
    fabZoomOut.setOnClickListener(this);

所以当用户点击这些控件时，你会得到回调，你可以调用适当的函数。这就是我在我的应用程序中的做法：

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.fabZoomInDashboard:
            googleMap.animateCamera(CameraUpdateFactory.zoomIn());
            break;
        case R.id.fabZoomOutDashboard:
            googleMap.animateCamera(CameraUpdateFactory.zoomOut());
            break;
    }
}

fabZoomIn 和 fabZoomOut 是在布局中添加的用于缩放的自定义控件。您可以对其他控件执行相同操作。

【讨论】：