카카오 지도 API(쇼핑리스트 글업로드시 오프라인일 경우)

[betterthani]

카카오 지도 api는 스크립트로 모든게 처리가 가능하나 내가 짠 코드가 아니라 해석하는데 시간이 좀 걸렸다. 카카오에서 주는 API는 그냥 지도만 보는 그런 기능인데 나는 그 지도에서 주소를 클릭했을때 상호명을 갖고오는게 나의 목적이였기에 어느 위치에서 어떤걸 불러와야하는지 고민이였고

위치를 찾아 아래의 코드를 접목시켜 controller와 데이터를 주고받았다. 해당 위치는 mouseout했을때 위치해놓았으며, 코드는 다음과 같다

// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)

kakao.maps.event.addListener(marker, 'click', function() {
    let selectTitle = title;
    $.ajax({
     url: "/product/shopping_list_write_view"
     , data: { "purchased": selectTitle }
     , success: function(data) {
            document.getElementById("shopping-offline-purchased").innerHTML = selectTitle;
     }
     , error: function(jqXHR, textStatus, errorThrown) {
        let errorMsg = jqXHR.responseJSON.status;
     alert(errorMsg + ":" + textStatus);
     }
       })
});

처음에 append함수를 썼었는데 input에는 적용이 안 되는지 모르고 열심히하다가 div로 변경하여 적용시켰으나, 마커를 클릭할때마다 계속해서 데이터가 쌓여서 출력이 됐었다. 덮어쓰는 방식을 찾아냈어야했고 방법을 찾은게 .innerHTML였다. 이제 값들도 잘 받아오나.. 지도를 숨겼다가 펼쳤을 경우에 지도가 깨져서 나온다

이 방법도 한 번 간구해야봐야할 것 같다.

[betterthani]

// d-none 일경우 대비 
    // 지도를 표시하는 div 크기를 변경하는 함수입니다
    function resizeMap() {
        var mapContainer = document.getElementById('map');
        mapContainer.style.width = '650px';
        mapContainer.style.height = '650px';
    }

    function relayout() {

        // 지도를 표시하는 div 크기를 변경한 이후 지도가 정상적으로 표출되지 않을 수도 있습니다
        // 크기를 변경한 이후에는 반드시  map.relayout 함수를 호출해야 합니다 
        // window의 resize 이벤트에 의한 크기변경은 map.relayout 함수가 자동으로 호출됩니다
        map.relayout();
    }

를 map script에 추가 하였고

display 조작하는곳에서

window.setTimeout(function() {
    map.relayout();
}, 0);

를 사용하여 d-none일때 지도가 깨지는 현상을 없앴다.

카카오 왈 : 지도 객체는 생성될 때 지도 div 크기에 따라 픽셀과 좌표정보를 설정하여 가지고 있습니다. 이 정보로 지도 객체는 지도표시, 마커 표시, 확대, 축소, 이동 등의 좌표 계산 등 지도 표시에 필요한 여러가지 연산을 수행하는데 이때 지도 div의 크기가 변경이 되면 지도객체가 가지고 있는 픽셀과 좌표정보가 div를 표시하는 크기와 달라지기 때문에 지도가 정상적으로 표출되지 않을 수도 있습니다. 그래서 크기를 변경한 이후에는 반드시 relayout 함수를 호출하여 픽셀과 좌표정보를 새로 설정해주어야합니다. window의 resize 이벤트에 의한 크기변경은 map.relayout 함수가 자동으로 호출됩니다.

https://apis.map.kakao.com/web/sample/mapRelayout/ 참고하였다.