[문제해결] 라이브러리 (coord2Address) 호출 관련 문제

JavaScript
#1

안녕하십니까 라이브러리 사용중 미해결 문제가 있어 글남깁니다.
다름이 아니오라 coord2Address 주소값을 불러오려고 하는데 뜻대로 되지 않아 문의글 남깁니다.

개발환경
OS: WINDOWS 10
TOOL : VISUAL STUDIO 2017
LANGUAGE : JAVASCRIPT + HTML + C#

최종적으로는 C#에서 웹클라이트로 지도 값을 읽어오는 일을 하고 있습니다.
현재 기본 기능 (지도 생성, 클릭이벤트 등등) 들은 사용중인데 라이브러리 관련하여 동작이 안되고 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>좌표로 주소를 얻어내기</title>
    <style>
    .map_wrap {position:relative;width:100%;height:350px;}
    .title {font-weight:bold;display:block;}
    .hAddr {position:absolute;left:10px;top:10px;border-radius: 2px;background:#fff;background:rgba(255,255,255,0.8);z-index:1;padding:5px;}
    #centerAddr {display:block;margin-top:2px;font-weight: normal;}
    .bAddr {padding:5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
</style>
</head>
<body>
<div class="map_wrap">
    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
    <div class="hAddr">
        <span class="title">지도중심기준 행정동 주소정보</span>
        <span id="centerAddr"></span>
    </div>
</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={API KEY}&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 1 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();

// 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보를 표시하도록 이벤트를 등록합니다
daum.maps.event.addListener(map, 'click', function(mouseEvent) {
    searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
alert(result[0].address.address_name);
});
});

function searchDetailAddrFromCoords(coords, callback) {
    // 좌표로 법정동 상세 주소 정보를 요청합니다
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

</script>
</body>
</html>

www.w3schools.com 라는 홈페이지 이용하여 웹 적용시켜서 동작할 경우 주소값 받아오는거는 확인했습니다.
**그런데 비주얼스튜디오에서 동일한 내용으로 진행했을 경우 **
alert(result[0].address.address_name);
의 값이 올라오지 않습니다.

제가 판단했을때 소스는 동일하게 사용하였고
혹시 비주얼스튜디오 2017 환경에서 라이브러리 함수 사용에 문제가 있는건 아닌가 생각이 듭니다.

필요에 따라서는 비주얼스튜디오에서 작성한 코드도 올리도록 하겠습니다.

확인해보시고 답변 부탁드리겠습니다…

마지막으로 라이브러리 관련 함수들은 모두 실행이 안되는걸로 보입니다…
제가 사용방법을 정확하게 이해를 못한거같은데…
꼭 확인 부탁드리겠습니다 ㅠㅠㅠㅠ

#2

비주얼 스튜디오에서는

<script type="text/javascript" src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=API KEY&libraries=services"></script>

로 기입하고 있습니다.
http:
사용 미사용에 있어서 차이가 있을수 있나요?

#3

비주얼 스튜디오에서의 일부 코드입니다.

`var geocoder = new daum.maps.services.Geocoder();`

    var mapContainer = document.getElementById('map'),
        mapOption = {
            center: new daum.maps.LatLng({Lat}, {Lng}),
            level: {Level},
            mapTypeId: {mapTypeId},
            draggable: {draggable},
            scrollwheel: {scrollwheel},
            disableDoubleClick: {disableDoubleClick},
            disableDoubleClickZoom: {disableDoubleClickZoom},
            tileAnimation: {tileAnimation},
            keyboardShortcuts: {keyboardShortcuts},
            speed: {speed}
        };
    oMap = new daum.maps.Map(mapContainer, mapOption);


    daum.maps.event.addListener(oMap, "click", function (oEvent)
    {
        setEvent("", "Map", "click", oEvent.latLng, oEvent.point);

        alert('a');

        searchDetailAddrFromCoords(oEvent.latLng, function (result, status) {
            alert('b');
        });
    });

function searchDetailAddrFromCoords(coords, callback) {
    // 좌표로 법정동 상세 주소 정보를 요청합니다
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

alert(‘a’)의 경우 발생
alert(‘b’)의 경우 미발생

잘못된부분있으면 지적부탁드리겠습니다.

#4

혹시 지도는 정상적으로 뜨나요?
Domain mismatch 로그가 보여 문의드립니다.

1개의 좋아요
#5

Domain mismatch 라 함은 어떤부분을 말씀하시는지요…
API키 정상입력하면 지도생성 정상 동작합니다.

#6

Domain mismatch 는 호출도메인과 등록 도메인이 다를때 발생하는 에러입니다.

그런데 이것과 관계는 없겠지만 지도 호출을 REST key 를 사용하고 계시는데
지도 호출은 JS key를 사용하셔야 해요.

1개의 좋아요
#7

JS KEY 사용시 지도가 나타나지 않아
REST KET를 사용했습니다.

그렇다면 처음 말씀하셨던 DOMAIN MISMATCH에 의한 문제라고 봐야할까요…
죄송한데 도메인입력부분이 어디부분인거죠…
호출도메인과 등록도메인이 어디서 다른지 제가 확인을 어떻게 해야할지 모르겠습니다…ㅜ

#8

현재는 도메인 정보를 변경하셨고,
지도와 서비스 라이브러리 사용의 호출 로그가 보이는데요,
말씀하신 이슈가 해결된 건가요?

1개의 좋아요
#9

친절한 설명 덕분에 끝까지 해결할 수 있었습니다.
정말 감사드립니다.

아무래도 윈폼 webbrowser를 사용하려고 하다보니 일부 매칭되지 않는 내용이 있는듯 합니다.
혹 저와 동일한 내용에 문제를 앓고 계시는분이 계시다면 참고부탁드리겠습니다.

해결내용 공유 드립니다.

먼저 스크립트 에러를 처음에 알지 못하여 정확한 원인 파악이 어려웠습니다.
스크립트 에러창 발생할 수 있도록 수정하였고 수정 후 나타난 에러 메세지는

http://s1.daumcdn.net/svc/attach/u03/cssjs/mapapi/libs/1.0.1/1515130215283/services.js

입니다.

구글링… 정확하게 말하면 카카오 개발자 포럼에서 이미 여럿 사람들이 문제해결이 되었고
그 자료 토대로 수정하였습니다.

수정내용1.


위 토픽처럼 meta데이터 수정하였습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">

수정내용2.
style관련 코드를 일부 첨가하였습니다.

<style type="text/css">
    html {
        height: 100%
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0
    }
</style>

추가 후 정상동작 중입니다.

웹이 전문분야가 아니다보니 삽질도 많이 했고 수정 후 이게 맞는건지도 정확히 모르겠지만 누군가에게는 도움이 되었으면 좋겠습니다.

Maps카카오 님 친절한답변 다시한번 감사드립니다.

2개의 좋아요
Drawing library기반으로 Line/Circle/Rectangle/PolyGon 그릴 때, 마우스 position과 다각형의 위치, 불일치