控制缩放和平移

请选择平台： Android iOS JavaScript

概览

在网页上使用地图时，您可能需要通过一些特定选项来控制用户与地图的互动方式，以便他们缩放和平移地图。可以在 MapOptions 接口中定义这些选项（例如 gestureHandling、minZoom、maxZoom 和 restriction）。

默认行为

下面的地图展示了地图互动的默认行为，此地图在实例化时只定义了 zoom 和 center 选项。

此地图的代码如下所示。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

控制手势处理

当用户滚动包含地图的网页时，滚动操作可能会无意间导致地图缩放。您可以使用 gestureHandling 地图选项控制此行为。

gestureHandling：cooperative

下面的地图使用设置为 cooperative 的 gestureHandling 选项，让用户能正常滚动页面，而不会缩放或平移地图。用户可以点击缩放控件来缩放地图。在触摸屏设备上，用户还可以在地图上通过双指移动来缩放和平移。

此地图的代码如下所示。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

查看示例

gestureHandling：auto

位于页面顶部且没有设置 gestureHandling 选项的地图与上面将 gestureHandling 设置为 cooperative 的地图具有相同的行为，因为此页面上的所有地图都包含在 <iframe> 内。根据地图是否包含在 <iframe> 内，gestureHandling 的默认值 auto 会变为 greedy 或 cooperative。

地图包含在 <iframe> 内 行为
是 cooperative
否 greedy

gestureHandling：greedy

下面是一个将 gestureHandling 设置为 greedy 的地图。与 cooperative 不同，此地图会针对所有触摸手势和滚动事件做出反应。

gestureHandling：none

您还可以将 gestureHandling 选项设置为 none，以便停用地图手势。

停用平移和缩放功能

若要完全停用平移和缩放地图的功能，必须添加以下两个选项：gestureHandling 和 zoomControl。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

下面的地图展示了上述代码中 gestureHandling 和 zoomControl 结合使用的效果。

限制地图边界和缩放功能

您可能想要允许使用手势和缩放控件，但希望将地图限制在特定边界内，或是设置最小和最大缩放级别。为此，您可以设置 restriction、minZoom 和 maxZoom 选项。下面的代码和地图展示了这些选项。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js