Điều khiển mức 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 trang web có thể yêu cầu các tuỳ chọn cụ thể nhằm kiểm soát cách người dùng tương tác với bản đồ để thu phóng và xoay. Các tuỳ chọn này, chẳng hạn như gestureHandling, minZoom, maxZoom và restriction, đượ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 lượt tương tác với bản đồ bằng một bản đồ được tạo bản sao chỉ với các tuỳ chọn zoom và center đượ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,
});
index.ts

JavaScript

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

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 tuỳ chọn bản đồ gestureHandling (Xử lý cử chỉ).

gestureHandling: cooperative

Bản đồ bên dưới sử dụng tuỳ chọn 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 xoay bản đồ. Người dùng có thể thu phóng bản đồ bằng cách nhấp vào các nút điều khiển thu phóng. Người dùng cũng có thể thu phóng và kéo bằng cách sử dụng thao tác hai ngón tay trên bản đồ cho các thiết bị 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",
});
index.ts

JavaScript

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

Xem mẫu

gestureHandling: auto

Bản đồ ở đầu trang không có tuỳ chọn gestureHandling có hành vi giống như bản đồ trước đó, trong đó 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 greedy và cooperative tuỳ thuộc vào việc bản đồ có nằm trong <iframe> hay không.

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

gestureHandling: greedy

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

xử lý cử chỉ: none

Bạn cũng có thể đặt tuỳ 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 tính năng xoay và thu phóng bản đồ, bạn phải đưa vào 2 tuỳ chọn gestureHandling và 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

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

Hạn chế ranh giới và thu phóng bản đồ

Bạn nên cho phép các cử chỉ và chế độ điều khiển thu phóng nhưng giới hạn bản đồ ở một ranh giới cụ thể hoặc mức thu phóng tối thiểu và tối đa. Để làm được việc này, bạn có thể đặt các tuỳ chọn restriction (hạn chế), minZoom và maxZoom. Mã và bản đồ sau đây minh hoạ các tuỳ 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,
    },
  },
});
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