บริการถ่ายภาพแบบซูมสูงสุด

  1. ภาพซูมสูงสุด
  2. คำขอ MaxZoom
  3. การตอบสนองต่อ MaxZoom

ภาพรวม

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;
index.ts

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;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง