控制縮放和平移功能

選取平台: 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

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

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

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 會根據地圖是否包含在 <iframe> 內,而在 greedycooperative 之間切換。

地圖包含在 <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 的組合。

限制地圖邊界和縮放功能

建議您允許手勢和縮放控制項,但將地圖限制在特定邊界內,或是限制最小和最大縮放等級。為此,您可以設定 restrictionminZoommaxZoom 選項。以下程式碼和地圖示範這些選項。

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