如何根据大小在 google 地图上添加移除缩放控件

Question

我看到 the website of google 我们可以根据地图大小 add/remove zoomControl。但是该页面没有说明如何执行此操作。

我的 objective 将删除智能手机上的缩放控件，因此在 576px 下我希望隐藏缩放控件。

我正在与 angular 合作，但不想订阅屏幕尺寸，但想让 google 自己做。

Answer 1

Google 地图不接受这样的变量，但它提到控件将隐藏在 200px 宽度处，要禁用它你应该明确提及它.

因此，如果您希望这样做，则需要 javascript。

首先检查设备的屏幕宽度，然后根据此设置 zoomControl 属性。例如：-

function initMap(): void {
  let zoomControl = true;
  if(window.innerWidth < 576) zoomControl = false;
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: zoomControl,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

如何根据大小在 google 地图上添加移除缩放控件

How to add remove zoomControl on google map base on size

javascript

angular

google-maps