Điều khiển tính năng thu phóng và kéo

Chọn nền tảng: Android iOS JavaScript

Tổng quan

Việc sử dụng bản đồ trên một trang web có thể yêu cầu các lựa chọn cụ thể để kiểm soát cách người dùng tương tác với bản đồ để thu phóng và kéo. Các lựa chọn này (chẳng hạn như gestureHandling, minZoom, maxZoomrestriction) được xác định trong giao diện MapOptions.

Hành vi mặc định

Bản đồ sau đây minh hoạ hành vi mặc định cho các hoạt động tương tác với bản đồ khi bản đồ được khởi tạo chỉ với các lựa chọn zoomcenter được xác định.

Mã cho bản đồ này có dạng như dưới đây.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});

Kiểm soát việc xử lý cử chỉ

Khi người dùng cuộn một trang có chứa bản đồ, thao tác cuộn có thể vô tình khiến bản đồ thu phóng. Bạn có thể kiểm soát hành vi này bằng cách sử dụng lựa chọn gestureHandling trên bản đồ.

gestureHandling: cooperative

Bản đồ bên dưới sử dụng chế độ gestureHandling được đặt thành cooperative, cho phép người dùng cuộn trang bình thường mà không cần thu phóng hoặc di chuyển bản đồ. Người dùng có thể thu phóng bản đồ bằng cách nhấp vào các chế độ thu phóng. Họ cũng có thể thu phóng và di chuyển bằng cách dùng cử chỉ hai ngón tay trên bản đồ cho các thiết bị có màn hình cảm ứng.

Mã cho bản đồ này có dạng như dưới đây.

TypeScript

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

JavaScript

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

Xem mẫu

gestureHandling: auto

Bản đồ ở đầu trang không có lựa chọn gestureHandling có cùng hành vi với bản đồ trước đó có gestureHandling được đặt thành cooperative vì tất cả bản đồ trên trang này đều nằm trong <iframe>. Giá trị gestureHandling mặc định auto chuyển đổi giữa greedycooperative dựa trên việc bản đồ có nằm trong <iframe> hay không.

Bản đồ nằm trong <iframe> Hành vi
cooperative
không greedy

gestureHandling: greedy

Bản đồ có gestureHandling được đặt thành greedy ở bên dưới. Không giống như cooperative, bản đồ này phản ứng với mọi cử chỉ chạm và sự kiện cuộn.

gestureHandling: none

Bạn cũng có thể đặt lựa chọn gestureHandling thành none để tắt cử chỉ trên bản đồ.

Tắt tính năng kéo và thu phóng

Để tắt hoàn toàn khả năng di chuyển và thu phóng bản đồ, bạn phải thêm 2 lựa chọn là 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,
});

Bản đồ bên dưới minh hoạ sự kết hợp giữa gestureHandlingzoomControl trong đoạn mã ở trên.

Hạn chế ranh giới và mức thu phóng của bản đồ

Bạn có thể muốn cho phép cử chỉ và chế độ thu phóng nhưng hạn chế bản đồ trong một ranh giới cụ thể hoặc mức thu phóng tối thiểu và tối đa. Để thực hiện việc này, bạn có thể đặt các lựa chọn restriction, minZoommaxZoom. Đoạn mã và bản đồ sau đây minh hoạ những lựa chọn này.

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