控制縮放和平移功能

選取平台： Android iOS JavaScript

總覽

如要在網頁使用地圖，您可能需採用特定選項，控制使用者在地圖上縮放和平移的方式。這些選項 (例如 gestureHandling、minZoom、maxZoom 和 restriction) 是在 MapOptions 介面內定義。

預設行為

下方地圖示範地圖互動的預設行為，這張地圖在例項化時只定義 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

下方地圖使用 gestureHandling 選項並設為 cooperative，可讓使用者正常捲動頁面，不會造成地圖縮放或平移。使用者可以按一下縮放控制項來縮放地圖，還可以透過觸控螢幕裝置，在地圖上撥動雙指，進行縮放和平移。

這張地圖的程式碼如下所示。

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> 內。預設的 gestureHandling 值 auto 會根據地圖是否在 <iframe> 內，切換為 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