지면 오버레이

1. 소개
2. 지면 오버레이 추가
3. 지면 오버레이 제거

소개

오버레이는 위도/경도 좌표에 연결되어 지도를 드래그하거나 확대/축소할 때 이동하는 지도상의 객체입니다. 지도에 이미지를 배치하려면 GroundOverlay 객체를 사용하세요.

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

지면 오버레이 추가

GroundOverlay의 생성자는 이미지의 URL과 이미지의 LatLngBounds를 매개변수로 지정합니다. 이미지는 지도의 지정된 경계 내에 렌더링되고 지도의 도법을 사용하여 조정됩니다.

// 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;
index.ts

// 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;
index.js

지면 오버레이 제거

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

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

예 보기