ภาพรวม
Google Maps API มีชิ้นส่วนแผนที่ที่ ระดับการซูมต่างๆ สำหรับภาพประเภทแผนที่ ตัวอย่างเช่น ภาพโรดแมปส่วนใหญ่มีให้ใช้งานตั้งแต่ระดับการซูม 0 ถึง 18 ภาพถ่ายจากดาวเทียมจะแตกต่างกันไปมากขึ้นเนื่องจากไม่ได้สร้างภาพนี้ แต่ถ่ายภาพโดยตรง
เนื่องจากตำแหน่งระยะไกลอาจไม่ได้แสดงภาพถ่ายจากดาวเทียมในระดับการซูมสูงเสมอไป หรืออาจเป็นพื้นที่ที่มีประชากรน้อยหรือบริเวณมหาสมุทรเปิด เป็นต้น คุณจึงอาจต้องการทราบระดับการซูมสูงสุดของภาพในตำแหน่งดังกล่าวล่วงหน้า วัตถุ MaxZoomService
มีอินเทอร์เฟซที่เรียบง่ายสำหรับการค้นหาระดับการซูมสูงสุดในตำแหน่งที่ระบุซึ่ง Google Maps มีภาพถ่ายดาวเทียม
คำขอ MaxZoom
การเข้าถึง MaxZoomService
เป็นแบบไม่พร้อมกัน เนื่องจาก Google Maps API ต้องเรียกไปยังเซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอด callback เพื่อดําเนินการเมื่อคําขอเสร็จสมบูรณ์ วิธีการเรียกกลับนี้ควรประมวลผลผลลัพธ์
ในการเริ่มต้นคำขอไปยัง MaxZoomService
ให้เรียกใช้ getMaxZoomAtLatLng()
โดยส่งผ่าน LatLng
ของตำแหน่งและฟังก์ชันเรียกกลับเพื่อดำเนินการเมื่อคำขอเสร็จสมบูรณ์
การตอบสนองต่อการซูมสูงสุด
เมื่อ getMaxZoomAtLatLng()
เรียกใช้ฟังก์ชัน callback ระบบจะส่งกลับพารามิเตอร์ 2 รายการดังนี้
status
มีMaxZoomStatus
ของคำขอzoom
มีระดับการซูม หากบริการล้มเหลวด้วยเหตุผลบางประการ ค่านี้จะไม่แสดง
โค้ด status
อาจแสดงค่าใดค่าหนึ่งต่อไปนี้
OK
บ่งชี้ว่าบริการพบระดับการซูมสูงสุดสำหรับภาพถ่ายดาวเทียมERROR
บ่งบอกว่าคำขอ MaxZoom ประมวลผลไม่ได้
ตัวอย่างต่อไปนี้แสดงแผนที่ของมหานครโตเกียว การคลิกที่ใดก็ได้บนแผนที่จะแสดงระดับการซูมสูงสุดในตำแหน่งนั้น (โดยทั่วไประดับการซูมทั่วโตเกียวจะแตกต่างกันระหว่างระดับการซูมที่ 18 ถึง 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;