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 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 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 tuỳ chọn bản đồ gestureHandling.
xử lý cử chỉ: 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. 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 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", });
xử lý cử chỉ: auto
Bản đồ ở đầu trang không có tuỳ chọn gestureHandling
có hành vi giống như bản đồ trước đó với 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
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
Dưới đây là 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ác cử chỉ trên bản đồ.
Tắt tính năng Lia và thu phóng
Để tắt hoàn toàn tính năng kéo và thu phóng bản đồ, bạn phải thêm hai tuỳ chọn là gestureHandling và 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, });
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 đồ
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. Để thực hiện việc này, bạn có thể đặt restriction, 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, }, }, });
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, }, }, });