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ể để 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 ánh xạ với bản đồ được tạo thực thể chỉ bằng các tuỳ chọn zoom
và center
được xác định.
Mã cho bản đồ này ở bên dưới.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
Kiểm soát thao tác bằng cử chỉ
Khi người dùng cuộn một trang 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 tuỳ chọn bản đồ gestureHandling.
Cử chỉ xử lý: 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 một cách bình thường mà không cần thu phóng hoặc kéo 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 dụng cũng có thể thu phóng và kéo bằng cách sử dụng chuyển động bằng 2 ngón tay trên bản đồ dành cho thiết bị màn hình cảm ứng.
Mã cho bản đồ này ở bên dưới.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
Cử chỉ xử lý: auto
Bản đồ ở đầu trang không có tuỳ chọn gestureHandling
sẽ có hành vi giống như bản đồ trước đó với gestureHandling (xử lý cử chỉ) đượ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ó nằm trong <iframe>
hay không.
Bản đồ nằm trong <iframe> |
Hành vi |
---|---|
có | cooperative |
no | greedy |
Cử chỉ xử lý: greedy
Dưới đây là một bản đồ có gestureHandling thành greedy
. Bản đồ này phản ứng với mọi cử chỉ chạm và các sự kiện cuộn không giống như cooperative
.
Cử chỉ xử lý: none
Bạn cũng có thể đặt tuỳ chọn gestureHandling (xử lý cử chỉ) thành none
để tắt các cử chỉ trên bản đồ.
Đang tắt tính năng kéo và thu phóng
Để vô hiệu hoá hoàn toàn tính năng xoay và thu phóng bản đồ, bạn phải đưa vào hai tuỳ chọn, 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 giữa gestureHandling và zoomControl trong mã trên.
Hạn chế ranh giới bản đồ và mức độ thu phóng
Bạn có thể 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 giới hạn cụ thể hoặc mức thu phóng tối thiểu và tối đa. Để làm việc này, bạn có thể đặt các tuỳ chọn hạn chế, minZoom và maxZoom. Mã và bản đồ sau đây sẽ 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, }, }, });