CustomOverlay 이미지 관련 문의

지도/로컬 API
1

안녕하세요

카카오 지도의 CustomOverlay 를 활용해 프로젝트 중인데요…
대략의 로직은 아래와 같습니다.

  • 지도 render 이후, CustomOverlay 사용해, container ele 와 동일한 크기로 이미지를 over 시킵니다.
  • CustomOverlay 의 position 은 북서 방향으로 합니다.
  • 이후 지도를 클릭하면, 마커를 생성하고, 마커의 위경도 정보를 사용합니다.
  • click 외, zoom, drag 등 지도의 모든 이벤트는 disable 시킵니다…

하지만 특정 위경도의 경우 CustomOverlay 가 render 되지 않고 있습니다.
대체적으로 서울권은 정상적으로 동작하는것 같고요…
지방쪽은 CustomOverlay 가 render 되지 않는 경우가 많은것같습니다.
또한, 확인을 위해 drag, zoom 을 활성화해서, drag 를 하거나, zoom 을 하면 CustomOverlay 나타났다 사라집니다…

비교를 위해 정상(map01), 이상(map11)의 경우를 모두 샘플링 해서 첨부합니다.

확인부탁드립니다.

감사합니다.

<h5>정상 case</h5>
<div id="map01" style="width:500px;height:300px;"></div>

<h5>이상 case</h5>
<div id="map11" style="width:500px;height:300px;"></div>

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=### fix ###"></script>

<script>
    const _img = "test.jpg"; // 이미지... width, height 강제함... 아무 이미지나 상관없음...
    const _lvl = 4;
    const _wth = 500;
    const _hit = 300;

    (function () {
        // ★★★★★ [정상] 서울 내방역 인근... 정상 케이스. ★★★★★
        const __la = 37.4921728734642, __lo = 126.991304315707;

        const map = new kakao.maps.Map(document.getElementById("map01"), {
            center: new kakao.maps.LatLng(__la, __lo),
            draggable: false,
            scrollwheel: false,
            keyboardShortcuts: false,
            disableDoubleClick: true,
            disableDoubleClickZoom: true,
            level: _lvl
        });

        const ewsn = map.getBounds();
        const sw__ = ewsn.getSouthWest();
        const ne__ = ewsn.getNorthEast();
        const nw__ = new kakao.maps.LatLng(ne__.getLat(), sw__.getLng()); // [check-this] this is north west
        const ct__ = `<img src="${_img}" style="position:absolute !important; z-index:2147483647;top:0px;left:0px;width:${_wth}px;height:${_hit}px" />`;
        const co__ = new kakao.maps.CustomOverlay({ clickable: false, content: ct__, map: map, position: nw__ });

        (new kakao.maps.Marker({ position: new kakao.maps.LatLng(__la, __lo) })).setMap(map);

        kakao.maps.event.addListener(map, "click", function (e) {
            (new kakao.maps.Marker({ position: e.latLng })).setMap(map);
            console.log(`# map01 - lat,lot ${e.latLng.toString()}`);
        });
    })();

    (function () {
        // ★★★★★ [이상] 부산 인근 ★★★★★
        const __la = 35.086239752, __lo = 128.7933738435;

        const map = new kakao.maps.Map(document.getElementById("map11"), {
            center: new kakao.maps.LatLng(__la, __lo),
            //draggable: false,
            //scrollwheel: false,
            //keyboardShortcuts: false,
            //disableDoubleClick: true,
            //disableDoubleClickZoom: true,
            level: _lvl
        });

        const ewsn = map.getBounds();
        const sw__ = ewsn.getSouthWest();
        const ne__ = ewsn.getNorthEast();
        const nw__ = new kakao.maps.LatLng(ne__.getLat(), sw__.getLng()); // [check-this] this is north west
        const ct__ = `<img src="${_img}" style="position:absolute !important; z-index:2147483647;top:0px;left:0px;width:${_wth}px;height:${_hit}px" />`;
        const co__ = new kakao.maps.CustomOverlay({ clickable: false, content: ct__, map: map, position: nw__ });

        (new kakao.maps.Marker({ position: new kakao.maps.LatLng(__la, __lo) })).setMap(map);

        kakao.maps.event.addListener(map, "click", function (e) {
            (new kakao.maps.Marker({ position: e.latLng })).setMap(map);
            console.log(`# map11 - lat,lot ${e.latLng.toString()}`);
        });
    })();
</script>

<!--
안녕하세요

카카오 지도의 CustomOverlay 를 활용해 프로젝트 중인데요..
대략의 로직은 아래와 같습니다.

- 지도 render 이후, CustomOverlay 사용해, container ele 와 동일한 크기로 이미지를 over 시킵니다.
- CustomOverlay 의 position 은 북서 방향으로 합니다.
- 이후 지도를 클릭하면, 마커를 생성하고, 마커의 위경도 정보를 사용합니다.
- click 외, zoom, drag 등 지도의 모든 이벤트는 disable 시킵니다...

하지만 특정 위경도의 경우 CustomOverlay 가 render 되지 않고 있습니다.
대체적으로 서울권은 정상적으로 동작하는것 같고요...
지방쪽은 CustomOverlay 가 render 되지 않는 경우가 많은것같습니다.
또한, 확인을 위해 drag, zoom 을 활성화해서, drag 를 하거나, zoom 을 하면 CustomOverlay 나타났다 사라집니다..

비교를 위해 정상(map01), 이상(map11)의 경우를 모두 샘플링 해서 첨부합니다.

확인부탁드립니다.

감사합니다.
-->