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

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

ภาพรวม

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

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

คำขอ MaxZoom

การเข้าถึง MaxZoomService เป็นแบบไม่พร้อมกันเนื่องจาก Google Maps API จำเป็นต้องเรียกไปยังเซิร์ฟเวอร์ภายนอก สำหรับ คุณจึงต้องส่งเมธอด 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

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

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