최대 확대/축소 이미지 서비스

  1. 최대 확대/축소 이미지
  2. MaxZoom 요청
  3. MaxZoom 응답

개요

Google 지도 API는 지도 유형 이미지에 다양한 확대/축소 수준의 지도 타일을 제공합니다. 예를 들어 대부분의 도로 지도 이미지는 0~18의 확대/축소 수준으로 제공됩니다. 위성 이미지는 생성되지 않고 직접 촬영하므로 더 광범위합니다.

이미지의 최고 확대/축소 수준을 미리 알고 싶을 수도 있지만, 외진 곳 위치(인구 밀도가 희박한 지역이나 개방된 바다 지역)의 경우 높은 확대/축소 수준에서 위성 이미지가 제공되지 않을 수도 있습니다. MaxZoomService 객체는 Google 지도에 위성 이미지가 있는 지정된 위치의 최대 확대/축소 사진을 찾기 위한 간단한 인터페이스를 제공합니다.

MaxZoom 요청

MaxZoomService에 대한 액세스는 Google 지도 API에서 외부 서버를 호출해야 하므로 비동기식입니다. 따라서 요청 완료 시 실행할 콜백 메서드를 전달해야 합니다. 이 콜백 메서드가 결과를 처리합니다.

MaxZoomService 요청을 시작하려면 getMaxZoomAtLatLng()를 호출하고 위치의 LatLng 및 요청 완료 시 실행할 콜백 함수를 전달하세요.

MaxZoom 응답

getMaxZoomAtLatLng()는 콜백 함수를 실행할 때 다음 두 매개변수를 다시 전달합니다.

  • 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
예 보기

샘플 사용해 보기