Servicio de imágenes con zoom máximo

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
  1. Imágenes con zoom máximo
  2. Solicitudes de MaxZoom
  3. Respuestas de MaxZoom

Descripción general

La API de Google Maps proporciona mosaicos de mapas en varios niveles de zoom para imágenes de mapas. Por ejemplo, la mayoría de las imágenes de mapas de rutas están disponibles en los niveles de zoom del 0 al 18. Las imágenes satelitales varían de manera más notoria, ya que en lugar de generarse, se capturan directamente.

Debido a que las imágenes satelitales no siempre están disponibles en altos niveles de zoom para las ubicaciones remotas (áreas de población dispersa o extensiones oceánicas abiertas), te recomendamos que conozcas de antemano cuál es el nivel de zoom más alto para las imágenes de una ubicación determinada. El objeto MaxZoomService proporciona una interfaz simple para descubrir el nivel de zoom máximo de una ubicación determinada para la cual Google Maps tiene imágenes satelitales.

Solicitudes de MaxZoom

El acceso a MaxZoomService es asíncrono, ya que la API de Google Maps debe realizar una llamada a un servidor externo. Por ese motivo, debes pasar un método de devolución de llamada para que se ejecute una vez que se complete la solicitud. Este método de devolución de llamada debe procesar el resultado.

Para iniciar una solicitud a MaxZoomService, llama a getMaxZoomAtLatLng() y pasa el objeto LatLng de la ubicación y una función de devolución de llamada que se ejecutará cuando se complete la solicitud.

Respuestas de MaxZoom

Cuando getMaxZoomAtLatLng() ejecute la función de devolución de llamada, pasará dos parámetros:

  • status contiene el MaxZoomStatus de la solicitud.
  • zoom contiene el nivel de zoom. Si, por algún motivo, se produce una falla en el servicio, este valor no estará presente.

El código status puede mostrar uno de los siguientes valores:

  • OK indica que el servicio encontró el nivel de zoom máximo para las imágenes satelitales.
  • ERROR indica que no se pudo procesar la solicitud de MaxZoom.

En el siguiente ejemplo, se muestra un mapa del área metropolitana de Tokio: Cuando se hace clic en cualquier parte del mapa, se indica el nivel de zoom máximo de esa ubicación. (Los niveles de zoom en el área de Tokio generalmente varían entre 18 y 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;
Ver ejemplo

Prueba la muestra