Tổng quan
API Google Maps cung cấp các ô bản đồ ở nhiều mức thu phóng cho hình ảnh loại bản đồ. Ví dụ: hầu hết hình ảnh lộ trình đều có ở các mức thu phóng từ 0 đến 18. Hình ảnh vệ tinh thay đổi rộng hơn vì hình ảnh này không được tạo ra mà được chụp trực tiếp.
Vì hình ảnh vệ tinh không phải lúc nào cũng có
mức thu phóng cao cho các địa điểm xa, chẳng hạn như
khu vực có dân cư thưa thớt hoặc khu vực đại dương, nên bạn nên
biết trước mức thu phóng cao nhất cho hình ảnh ở một vị trí cụ thể. Đối tượng MaxZoomService
cung cấp một giao diện đơn giản để khám phá mức thu phóng tối đa tại một vị trí nhất định mà Google Maps có hình ảnh vệ tinh.
Yêu cầu MaxZoom
Việc truy cập MaxZoomService
là không đồng bộ, vì API Google Maps cần thực hiện lệnh gọi đến một máy chủ bên ngoài. Vì lý do đó, bạn cần truyền phương thức callback để thực thi sau khi hoàn tất yêu cầu. Phương thức gọi lại này sẽ xử lý kết quả.
Để bắt đầu yêu cầu đến MaxZoomService
, hãy gọi getMaxZoomAtLatLng()
, truyền LatLng
của vị trí và một hàm callback để thực thi sau khi hoàn tất yêu cầu.
Phản hồi MaxZoom
Khi getMaxZoomAtLatLng()
thực thi hàm callback, hàm này sẽ trả về 2 tham số:
status
chứaMaxZoomStatus
của yêu cầu.zoom
chứa mức thu phóng. Nếu vì lý do nào đó mà dịch vụ không thành công, thì giá trị này sẽ không xuất hiện.
Mã status
có thể trả về một trong các giá trị sau:
OK
cho biết dịch vụ đã tìm thấy mức thu phóng tối đa cho hình ảnh vệ tinh.ERROR
cho biết rằng không thể xử lý yêu cầu MaxZoom.
Ví dụ sau đây cho thấy bản đồ của khu đô thị Tokyo. Nhấp vào vị trí bất kỳ trên bản đồ sẽ cho biết mức thu phóng tối đa tại vị trí đó. (Mức thu phóng ở Tokyo thường thay đổi trong khoảng từ mức thu phóng 18 đến 21.)
TypeScript
let map: google.maps.Map; let maxZoomService: google.maps.MaxZoomService; let infoWindow: google.maps.InfoWindow; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 35.6894, lng: 139.692 }, mapTypeId: "hybrid", }); infoWindow = new google.maps.InfoWindow(); maxZoomService = new google.maps.MaxZoomService(); map.addListener("click", showMaxZoom); } function showMaxZoom(e: google.maps.MapMouseEvent) { maxZoomService.getMaxZoomAtLatLng( e.latLng as google.maps.LatLng, (result: google.maps.MaxZoomResult) => { if (result.status !== "OK") { infoWindow.setContent("Error in MaxZoomService"); } else { infoWindow.setContent( "The maximum zoom at this location is: " + result.zoom ); } infoWindow.setPosition(e.latLng); infoWindow.open(map); } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; let maxZoomService; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 35.6894, lng: 139.692 }, mapTypeId: "hybrid", }); infoWindow = new google.maps.InfoWindow(); maxZoomService = new google.maps.MaxZoomService(); map.addListener("click", showMaxZoom); } function showMaxZoom(e) { maxZoomService.getMaxZoomAtLatLng(e.latLng, (result) => { if (result.status !== "OK") { infoWindow.setContent("Error in MaxZoomService"); } else { infoWindow.setContent( "The maximum zoom at this location is: " + result.zoom, ); } infoWindow.setPosition(e.latLng); infoWindow.open(map); }); } window.initMap = initMap;