Đ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.

Chế độ 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 đồ được tạo thực thể chỉ với các tuỳ chọn zoom và center được xác định.

Mã cho bản đồ này như sau.

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 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 làm cho bản đồ bị 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ỉ: cooperative

Bản đồ bên dưới sử dụng bộ tuỳ chọn gestureHandling vào 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. Chúng cũng có thể thu phóng và xoay bằng cách sử dụng chuyển động hai ngón tay trên bản đồ đối với màn hình cảm ứng thiết bị.

Mã cho bản đồ này như sau.

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

xử lý cử chỉ: auto

Bản đồ ở đầu trang không có tuỳ chọn gestureHandling cũng giữ nguyên hành vi của bản đồ trước đó bằng tính năng gestureHandling được đặt thành cooperative do tất cả bản đồ trên trang này đều nằm trong một <iframe>. Giá trị gestureHandling mặc định auto chuyển đổi giữa greedy và cooperative dựa trên việc bản đồ có có trong <iframe>.

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

xử lý cử chỉ: greedy

Một bản đồ có tính năng gestureHandling được đặt thành greedy là bên dưới. 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ác cử chỉ trên bản đồ.

Tắt tính năng Lia và thu phóng

Để vô hiệu hoá hoàn toàn khả năng xoay và thu phóng bản đồ, có hai tuỳ chọn, gestureHandling và Bạn phải đưa zoomControl vào.

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 đồ dưới đây minh hoạ sự kết hợp của gestureHandling và zoomControl trong mã ở trên.

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

Có thể mong muốn cho phép các cử chỉ và điều khiển thu phóng nhưng hạn chế bản đồ trong một giới hạn 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 restriction, minZoom, và maxZoom. Mã và ánh xạ sau đây minh hoạ các 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,
    },
  },
});
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