그라운드 오버레이

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
플랫폼 선택: Android iOS 자바스크립트
  1. 소개
  2. 지면 오버레이 추가하기
  3. 지면 오버레이 삭제하기

소개

오버레이는 위도/경도 좌표에 연결된 지도의 객체이므로 지도를 드래그하거나 확대/축소하면 오버레이도 함께 이동합니다. 지도에 이미지를 배치하려면 GroundOverlay 객체를 사용하면 됩니다.

다른 유형의 오버레이에 관한 자세한 내용은 지도에 그리기를 참고하세요.

그라운드 오버레이 추가

GroundOverlay의 생성자는 이미지의 URL과 이미지의 LatLngBounds를 매개변수로 지정합니다. 이미지는 지도에서 렌더링되고, 지정된 경계로 제한되고 지도의 프로젝션을 사용하여 맞춰집니다.

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

그라운드 오버레이 제거

지도에서 오버레이를 삭제하려면 오버레이의 setMap() 메서드를 호출하여 null를 전달합니다. 이 메서드를 호출해도 오버레이가 삭제되지는 않습니다. 지도에서 오버레이를 삭제합니다. 오버레이를 삭제하려면 지도에서 제거한 다음 오버레이 자체를 null로 설정해야 합니다.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

예 보기