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

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

ภาพรวม

ดูเอกสารอ้างอิง Maps JavaScript API ด้วย การซูมสูงสุด

Google Maps API มีไทล์แผนที่ที่ ระดับการซูมต่างๆ สำหรับภาพประเภทแผนที่ ตัวอย่างเช่น ภาพแผนที่ถนนส่วนใหญ่จะพร้อมใช้งานที่ระดับการซูม 0 ถึง 18 ภาพถ่ายจากดาวเทียมจะมีความแตกต่างกันมากกว่า เนื่องจากภาพถ่ายนี้ไม่ได้สร้างขึ้น แต่ถ่ายโดยตรง

เนื่องจากภาพถ่ายจากดาวเทียมอาจไม่พร้อมใช้งานที่ระดับการซูมสูงเสมอไปสำหรับสถานที่ห่างไกล เช่น พื้นที่ที่มีประชากรเบาบางหรือพื้นที่กลางมหาสมุทร คุณจึงอาจต้องการทราบระดับการซูมสูงสุดสำหรับภาพถ่ายในสถานที่หนึ่งๆ ล่วงหน้า ออบเจ็กต์ MaxZoomService มีอินเทอร์เฟซที่เรียบง่ายสำหรับการค้นหาระดับการซูมสูงสุด ณ สถานที่ตั้งที่กำหนดซึ่ง Google Maps มีภาพถ่ายจากดาวเทียม

คำขอ MaxZoom

การเข้าถึง MaxZoomService เป็นแบบอะซิงโครนัส เนื่องจาก Google Maps API ต้องเรียกใช้เซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอด callback เพื่อดำเนินการเมื่อคำขอเสร็จสมบูรณ์ เมธอด Callback นี้ควรประมวลผลผลลัพธ์

หากต้องการเริ่มส่งคำขอไปยัง MaxZoomService ให้เรียกใช้ getMaxZoomAtLatLng() โดยส่ง LatLng ของตำแหน่งและฟังก์ชัน Callback เพื่อดำเนินการเมื่อคำขอเสร็จสมบูรณ์

การตอบสนองของ MaxZoom

เมื่อ 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

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript คอมไพล์มาจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง