總覽
在網頁上使用地圖時,您可能需要特定選項控制使用者與地圖互動,以便使用者進行縮放和平移。這些選項 (例如 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
下方地圖使用 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>
內。預設的 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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
下方地圖示範上方程式碼中 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, }, }, });
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, }, }, });