카카오맵/카카오맵API사용법/카카오맵 위치 표시/KAKAO MAP API/카카오맵API사용하기/카카오맵 주소 좌표/카카오맵 주소를 좌표로 변환

 

 

구글맵이나, 네이버지도를 사용한 경험은 있었는데, 이번에 로또관련 페이지를 만들면서 카카오맵을 처음 사용해 보았다. 구글 개발자 페이지 들어가보니 깔금하게 정리가 되어 있어서 사용에는 어려움이 없었다. 

 

우선 내가 할 작업은 아래와 같다.

 

1. 로또 당첨판매점 주소를 가져온다.

2. 주소를 좌표로 변환한다.

3. 좌표를 카카오맵에 원하는 모양으로 표시해준다.

 

 

카카오API를 사용하려면 앱키가 필요하기 때문에, 혹시 아직 발급전이면 아래 페이지에 들어가서 키를 받아와야 한다.

 

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

내 내플리케이션 > 앱설정 > 플랫폼 메뉴로 들어가서 자신이 사용할 플랫폼을 등록해 준다.

나는 Web페이지에서 사용할 것이기 때문에 일단, 내 페이지들을 등록해 두었다.

개발 환경까지 등록해줘야 편하다.

 

플랫폼 등록

 

 

 

Javascript API는 아래 페이지에서 가이드를 참고하면 된다.

https://apis.map.kakao.com/web/guide/

 

기본 준비가 끝났으니, 이제 웹페이지 작업을 해보자.

 

 

우리가 사용할 API와 라이브러리는 아래와 같다.

<!--실제 지도를 그리는 javascript API를 불러오기-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[앱키]&libraries=services"></script>

<!--주소-좌표 변환을 할수 있응 services 라이브러리 불러오기-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[앱키]"></script>

 

 

사용중인 전체 소스코드다. <%=store_add%> 부분에 표시할 주소를 입력해주면 나머지는 카카오에서 알아서 해준다.

정말 편한 것 같다.

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[나의 앱키]&libraries=services"></script>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[나의 앱키]"></script>
    <script type="text/javascript">
        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
            level: 3 //지도의 레벨(확대, 축소 정도)
        };

        // 지도를 생성합니다
        var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

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

        // 주소로 좌표를 검색합니다
        geocoder.addressSearch('<%=store_add%>', function (result, status) {

            // 정상적으로 검색이 완료됐으면 
            if (status === kakao.maps.services.Status.OK) {

                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                // 결과값으로 받은 위치를 마커로 표시합니다
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });

                // 인포윈도우로 장소에 대한 설명을 표시합니다
                var infowindow = new kakao.maps.InfoWindow({
                    content: '<div style="width:150px;text-align:center;padding:6px 0;"><div style="font-weight: bold;"><%=store_name%></div><div>1등당첨횟수 : <%=win_cnt%></div></div>'
                });
                infowindow.open(map, marker);

                // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                map.setCenter(coords);
            }
        });    

    </script>

 

 

각자의 취향에 맞게 사용하면 되겠지만, 나는 팝업처럼 꾸며보았다.

그럼 다들 즐코딩하세요!

 

 

 

카카오맵 API를 활용해서 내가 만든 로또페이지! 

http://ddogram.ga/vue/index_v2.aspx

 

카카오맵/카카오맵API사용법/카카오맵 위치 표시/KAKAO MAP API/카카오맵API사용하기/카카오맵 주소 좌표/카카오맵 주소를 좌표로 변환

SNS 공유와 더불어 자주 사용되는 링크복사입니다.

<input type="hidden" id="hidUrl" value="gyunbox.tistory.com"/>
<script>
	//주소복사
     function TourUrlCopy() {
        var addrTxt = document.getElementById("hidUrl").value;
        //        var isIE = (document.all)?true:false;
        
		var isIE = false;
		var agent = navigator.userAgent.toLowerCase();
		if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {
			isIE = true;
		}

        if(isIE){
        if(confirm("이 글의 주소를 클립보드에 복사하시겠습니까?"))
            window.clipboardData.setData("Text",addrTxt);
        }else{
            temp = prompt("Ctrl+C를 눌러 주소를 클립보드로 복사하세요.",addrTxt);
        }
     }
</script>

웹페이지 작업을 하다 보면, 출력 버튼이 있고

출력 버튼 클릭시, 특정 영역의 데이터만 프리트 해야 하는 경우가 있다.

이럴 경우에는 아래 2가지 방법을 활용하면 된다.

특정 div를 출력할때는 divPrint(), 특정 iframe 내용을 출력할때는 iframePrint3()

 

아이프레임 프린트하기/아이프레임출력/특정영역출력/프린트함수/아이프레임프린트

 

<html>
<body>
    <script>

        function divPrint() {
            var inbody = document.body.innerHTML; // 이전 body 영역 저장
            window.onbeforeprint = function () { // 프린트 화면 호출 전 발생하는 이벤트
                document.body.innerHTML = document.getElementById('targetDiv').innerHTML; // 원하는 영역 지정
            }
            window.onafterprint = function () { // 프린트 출력 후 발생하는 이벤트
                document.body.innerHTML = inbody; // 이전 body 영역으로 복구
            }
            window.print();
        }

        function framePrint3() {
            window.frames["frmTest"].focus();
            window.frames["frmTest"].print();
        }
    </script>
    <a href="#" onclick="javascript:divPrint();">특정div출력</a><br />
    <a href="#" onclick="javascript:framePrint3();">아이프레임내용출력</a><br />
    <h1>div 영역</h1>
    <DIV ID="targetDiv" STYLE="BORDER:1PX SOLID RED; WIDTH:500PX; HEIGHT:100PX;FLOAT:LEFT;">
        DIV내용
    </DIV>
    <div id="" style="height:500px; display:block;">
        <h1>아이프레임 영역</h1>
        <iframe src="printinner.asp" id="frmTest" name="frmTest"
            style="width:500px; height:500px; border:1px solid red;float:left; ">
    </div>
</body>
</html>

asp Json 생성

javascript 로 페이지 호출

$.ajax({  
        dataType: "json",  
        url: "getJson.asp",  
        data: "",  
        success: function(data){
            console.log(data);
        },
        error: function(){
            console.log("error");
        }

});

asp로 json 형태의 결과 값 리턴

DB를 활용해서 다양한 값을 리턴 할 수 있습니다.

response.write "{"

    response.write  """docType"":""new"""
    response.write  ",""rowNum"":""10"""

for i =0 to 10 step 1

    response.write  ",""tit"&i&""":""number "&i&""""
    response.write  ",""tit"&i&""":""number "&i&""""

next
response.write "}"

console.log 로 찍어본 결과 화면

 

 

+ Recent posts