控制缩放和平移

请选择平台: Android iOS JavaScript

概览

在网页上使用地图时,您可能需要特定选项来控制用户与地图的互动方式,以便他们缩放和平移地图。这些选项(例如 gestureHandlingminZoommaxZoomrestriction)是在 MapOptions 接口中定义的。

默认行为

下面的地图展示了地图互动的默认行为,此地图在初始化时只定义了 zoomcenter 选项。

此地图的代码如下所示。

TypeScript

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

JavaScript

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

控制手势处理

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

gestureHandling:cooperative

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

此地图的代码如下所示。

TypeScript

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

JavaScript

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

查看示例

gestureHandling:auto

页面顶部没有 gestureHandling 选项的地图与上面将 gestureHandling 设置为 cooperative 的地图具有相同的行为,因为此页面上的所有地图都位于 <iframe> 内。默认的 gestureHandlingauto 可以在 greedycooperative 之间切换,具体取决于地图是否包含在 <iframe> 内。

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

gestureHandling:greedy

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

gestureHandling:none

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

停用平移和缩放功能

若要完全停用平移和缩放地图的功能,必须包含两个选项:gestureHandlingzoomControl

TypeScript

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

JavaScript

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

下面的地图展示了上述代码中 gestureHandlingzoomControl 的组合。

限制地图边界和缩放功能

建议您允许使用手势和缩放控件,但要将地图限制在特定边界或最小和最大缩放级别。为此,您可以设置限制minZoommaxZoom 选项。下面的代码和地图展示了这些选项。

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,
    },
  },
});

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,
    },
  },
});