概览
在网页上使用地图时,您可能需要特定选项来控制用户与地图的互动方式,以便他们缩放和平移地图。这些选项(例如 gestureHandling
、minZoom
、maxZoom
和 restriction
)是在 MapOptions 接口中定义的。
默认行为
下面的地图展示了地图互动的默认行为,此地图在初始化时只定义了 zoom
和 center
选项。
此地图的代码如下所示。
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
控制手势处理
当用户滚动包含地图的网页时,滚动操作可能会无意间导致地图缩放。您可以使用 gestureHandling 地图选项控制此行为。
gestureHandling:cooperative
下面的地图使用设置为 cooperative
的 gestureHandling 选项,可让用户正常滚动页面,而不会缩放或平移地图。用户可以点击缩放控件来缩放地图。在触摸屏设备上,用户还可以在地图上通过双指移动来缩放和平移。
此地图的代码如下所示。
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>
内。默认的 gestureHandling 值 auto
可以在 greedy
和 cooperative
之间切换,具体取决于地图是否包含在 <iframe>
内。
地图包含在 <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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
下面的地图展示了上述代码中 gestureHandling 和 zoomControl 的组合。
限制地图边界和缩放功能
建议您允许使用手势和缩放控件,但要将地图限制在特定边界或最小和最大缩放级别。为此,您可以设置限制、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, }, }, });
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, }, }, });