logo
Tutorials Examples naver map js api v3 네이버 지도 API 지상 오버레이

지상 오버레이

지상 오버레이는 특정 이미지를 지도의 특정 위치(좌표 경계)에 타일처럼 배치하는 오버레이입니다. 따라서 사용자가 지도 화면을 드래그하거나 확대/축소하면 타일과 동일하게 동작합니다.

지상 오버레이 추가하기

지상 오버레이를 사용하려면 GroundOverlay 클래스의 객체를 생성해야 합니다. 생성자에는 하나의 이미지 URL과 좌표 경계, GroundOverlayOptions 객체 리터럴을 인수로 전달합니다.

다음 예제는 일반 지도 위에 위성 지도 이미지를 올리는 예제입니다.

var bounds = new naver.maps.LatLngBounds(
        new naver.maps.LatLng(36.634249797, 127.129160067),
        new naver.maps.LatLng(36.734249797, 127.410516004)
    );

var map = new naver.maps.Map("map", {
    zoom: 8,
    center: new naver.maps.LatLng(36.634249797, 127.129160067),
    mapTypeId: "normal"
});

var groundOverlay = new naver.maps.GroundOverlay(
    "../images/naver-satellite.png",
    bounds,
    {
        opacity: 1,
        clickable: false
    }
);

groundOverlay.setMap(map);

Examples: 지상 오버레이 표시하기

지상 오버레이 제거하기

지상 오버레이를 제거하려면 지상 오버레이 객체의 setMap 메서드에 null을 전달합니다.

groundOverlay.setMap(null);