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

Question

Google 地图 API 极大地增加了默认地图控件的大小（地图类型、缩放、全屏等）。我怎样才能改变它们的大小？

Answer 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>

Answer 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 是在布局中添加的用于缩放的自定义控件。您可以对其他控件执行相同的操作。