확대/축소 및 화면 이동 관리

플랫폼 선택: 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

아래 지도에서는 cooperative로 설정된 gesturehandling 옵션을 사용하여 사용자가 지도를 확대/축소하거나 화면 이동하지 않고 정상적으로 페이지를 스크롤할 수 있도록 합니다. 사용자는 확대/축소 컨트롤을 클릭하여 지도를 확대/축소할 수 있습니다. 또한 터치 스크린 기기에서 지도를 두 손가락으로 움직여 확대/축소하고 화면 이동할 수도 있습니다.

다음은 이 지도에 대한 코드입니다.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts
 <ph type="x-smartling-placeholder">

JavaScript

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

샘플 보기

gestureHandling: auto

gestureHandling 옵션이 없는 페이지 상단 지도의 동작은 이 페이지의 모든 지도가 <iframe> 내에 있기 때문에 gestureHandling이 cooperative로 설정된 이전 지도와 동일합니다. 기본 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
 <ph type="x-smartling-placeholder">

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