본문 바로가기
컴퓨터/Python

[Python] 파이썬, HTML로 카카오맵 api 해상도 높은 큰 지도 만들기

by sjblog 2021. 11. 18.
반응형

부동산과 관련하여 지도를 확대해도, 축소해도 해상도가 높은 큰지도를 필요할 때가 있습니다.

 

특히, 축소해도 여전히 해상도가 높은 10,000px * 10,000px 의 큰 이미지가 필요할때 사용할 수 있겠습니다.

 

<예시>

 

1. 카카오맵 api KEY 발급

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

먼저, 카카오맵 api의 KEY를 발급을 받습니다.

 

 

우리가 사용할 키는 "JavaScript 키" 입니다.

 

 

플랫폼-Web

 

사이트 도메인에 http://localhost:8080 을 입력해줍니다.

(나중에 혹시 홈페이지에 넣을 필요가 있을 때, 본인의 사이트 도메인을 추가합니다.)

 

2. HTML 코드 작성

<!--큰지도 여백 없애기-->
<body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'>

<!--큰지도 크기 설정-->
<div id="map" style="width:5000px;height:5000px;"></div>

<!--발급받은 Javascript 키를 입력-->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 Javascript키를 입력"></script>

<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		mapOption = {
			center: new kakao.maps.LatLng(37.512855, 126.940243), // 지도의 중심좌표
			level: 1, // 지도의 확대 레벨
			mapTypeId : kakao.maps.MapTypeId.SKYVIEW // 지도종류
		}; 

	// 지도를 생성한다 
	var map = new kakao.maps.Map(mapContainer, mapOption);	
</script>

메모장에 위 코드를 입력하고

5줄: 원하는 지도 크기를 수정하고

8줄: 발급받은 Javascrip키를 수정하고

13줄: 큰지도의 위치를 위도와 경도로 입력해줍니다.

14줄: 확대레벨은 해상도를 가장 높게 하기 위하여 1로 설정합니다.

 

kakaomap.html 확장자로 저장해줍니다.

 

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

더욱 다양한 코드와 설명은 위 카카오 공식 홈페이지를 확인해봅시다.

 

3. 로컬 서버 실행

처음 카카오api 플랫폼에서 사이트 도메인을 http://localhost:8080 으로 설정하였습니다.

 

https://sjblog1.tistory.com/39

 

[Python] 파이썬 로컬 서버 localhost 간단하게 만들기(터미널, 코드)

파이썬에서 로컬 서버 localhost 127.0.0.1 실행하는 방법입니다. 간단하게 터미널에 직접 입력하는 방식과, 코드를 작성하는 방법이 있습니다. 1. 파이썬 터미널 이용하는 방법 터미널에 입력해줍니

sjblog1.tistory.com

 

이곳에서 파일을 다운로드 받거나 로컬 서버를 실행시켜줍니다.

 

4. 카카오맵 큰지도 실행

크롬 주소창에 http://localhost:8080 을 입력해줍니다.

 

여기서, 작성했던 코드를 저장한, kakaomap.html을 찾아 클릭합니다.

 

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ko 

 

GoFullPage - Full Page Screen Capture

추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다!

chrome.google.com

 

전체 웹페이지를 캡쳐할 수 있는 크롬 확장프로그램을 설치하여 이미지를 캡쳐합니다.

 

카카오맵 큰지도를 얻게 되었습니다.

 

5. 매번 지도 크기, 위도경도 찾아서 수정하기 귀찮다?

내가 원하는 위치의 위도, 경도를 검색하기 귀찮고,

큰지도 크기도 매번 메모장으로 수정하기 귀찮다!

 

파이썬으로 EXE 실행파일을 만들어 실행만 하면 옵션을 선택할 수 있게 사용해보자!

 

 

이후 개인홈페이지를 만들 때 참고할 수 있겠습니다!

 

javascript_key 변수 2곳만 입력해주면 됩니다.

 

이후 pyinstaller 을 사용하여 EXE 실행파일을 만들어 줍니다.

 

샘플 EXE 실행파일을 제공해 드리고 있으나,

저의 Key를 사용하기 때문에 api 조회횟수가 소진될 경우 정상적으로 작동하지 않을 수 있습니다.

카카오맵큰지도키워드검색.exe
10.01MB

(샘플 파일)

또한, 예고없이 Key 등록을 취소할 수 있음을 알려드립니다.

 

import requests
from flask import Flask, render_template
import os
import getpass
import threading
import webbrowser
import sys

#1.html 생성
def getKakaoMap1HTML():
    #키입력
    javascript_key = ""	
    
    result = ""
    result = result + "<!DOCTYPE html>" + "\n"
    result = result + "<html>" + "\n"
    result = result + "<head>" + "\n"
    result = result + "<meta charset='utf-8'/>" + "\n"
    result = result + "   <script src='https://code.jquery.com/jquery-latest.js'></script>" + "\n"
    result = result + "   <script type='text/javascript' src='//dapi.kakao.com/v2/maps/sdk.js?appkey=" + javascript_key + "&libraries=services'></script>" + "\n"
    result = result + "    <title>키워드로 장소검색하고 목록으로 표출하기</title>" + "\n"
    result = result + "    <style>" + "\n"
    result = result + ".map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}" + "\n"
    result = result + ".map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}" + "\n"
    result = result + ".map_wrap {position:relative;width:100%;height:500px;}" + "\n"
    result = result + "#menu_wrap {position:absolute;top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}" + "\n"
    result = result + ".bg_white {background:#fff;}" + "\n"
    result = result + "#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}" + "\n"
    result = result + "#menu_wrap .option{text-align: center;}" + "\n"
    result = result + "#menu_wrap .option p {margin:10px 0;}  " + "\n"
    result = result + "#menu_wrap .option button {margin-left:5px;}" + "\n"
    result = result + "#placesList li {list-style: none;}" + "\n"
    result = result + "#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}" + "\n"
    result = result + "#placesList .item span {display: block;margin-top:4px;}" + "\n"
    result = result + "#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}" + "\n"
    result = result + "#placesList .item .info{padding:10px 0 10px 55px;}" + "\n"
    result = result + "#placesList .info .gray {color:#8a8a8a;}" + "\n"
    result = result + "#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}" + "\n"
    result = result + "#placesList .info .tel {color:#009900;}" + "\n"
    result = result + "#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}" + "\n"
    result = result + "#placesList .item .marker_1 {background-position: 0 -10px;}" + "\n"
    result = result + "#placesList .item .marker_2 {background-position: 0 -56px;}" + "\n"
    result = result + "#placesList .item .marker_3 {background-position: 0 -102px}" + "\n"
    result = result + "#placesList .item .marker_4 {background-position: 0 -148px;}" + "\n"
    result = result + "#placesList .item .marker_5 {background-position: 0 -194px;}" + "\n"
    result = result + "#placesList .item .marker_6 {background-position: 0 -240px;}" + "\n"
    result = result + "#placesList .item .marker_7 {background-position: 0 -286px;}" + "\n"
    result = result + "#placesList .item .marker_8 {background-position: 0 -332px;}" + "\n"
    result = result + "#placesList .item .marker_9 {background-position: 0 -378px;}" + "\n"
    result = result + "#placesList .item .marker_10 {background-position: 0 -423px;}" + "\n"
    result = result + "#placesList .item .marker_11 {background-position: 0 -470px;}" + "\n"
    result = result + "#placesList .item .marker_12 {background-position: 0 -516px;}" + "\n"
    result = result + "#placesList .item .marker_13 {background-position: 0 -562px;}" + "\n"
    result = result + "#placesList .item .marker_14 {background-position: 0 -608px;}" + "\n"
    result = result + "#placesList .item .marker_15 {background-position: 0 -654px;}" + "\n"
    result = result + "#pagination {margin:10px auto;text-align: center;}" + "\n"
    result = result + "#pagination a {display:inline-block;margin-right:10px;}" + "\n"
    result = result + "#pagination .on {font-weight: bold; cursor: default;color:#777;}" + "\n"
    result = result + "</style>" + "\n"
    result = result + "</head>" + "\n"
    result = result + "<body>" + "\n"
    result = result + "<div class='map_wrap'>" + "\n"
    result = result + "    <div id='map' style='width:100%;height:150%;position:relative;overflow:hidden;'></div>" + "\n"
    result = result + "    <div id='menu_wrap' class='bg_white'>" + "\n"
    result = result + "        <div class='option'>" + "\n"
    result = result + "            <div>" + "\n"
    result = result + "               <form onsubmit='searchPlaces(); return false;'>" + "\n"
    result = result + "                    키워드 : <input type='text' value='서울시청' id='keyword' size='15'> " + "\n"
    result = result + "                    <button type='submit'>검색하기</button> " + "\n"
    result = result + "                </form>" + "\n"
    result = result + "            </div>" + "\n"
    result = result + "        </div>" + "\n"
    result = result + "        <hr>" + "\n"
    result = result + "        <ul id='placesList'></ul>" + "\n"
    result = result + "        <div id='pagination'></div>" + "\n"
    result = result + "    </div>" + "\n"
    result = result + "    <p id='result'></p>" + "\n"
    result = result + "<p><label style = 'position: relative; top: 10px;'>사이즈: <input type = 'text' id = 'width' value = '1000'></label>" + "\n"
    result = result + "<label style = 'position: relative; top: 10px;'> X <input type = 'text' id = 'height'  value = '1000'></label></p>" + "\n"
    result = result + "<p><label style = 'position: relative; top: 20px;'>줌레벨: <select type = 'text' id = 'zoomlevel'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option></select></label></p>" + "\n"
    result = result + "<p><button style = 'position: relative; top: 30px; width:50px; height:30px;' id = 'button1' onclick = 'button1_click();'>확인</button></p>" + "\n"    
    result = result + "</div>" + "\n"
    result = result + "<script>" + "\n"
    result = result + "// 마커를 담을 배열입니다" + "\n"
    result = result + "var markers = [];" + "\n"
    result = result + "var mapContainer = document.getElementById('map'), // 지도를 표시할 div " + "\n"
    result = result + "    mapOption = {" + "\n"
    result = result + "        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표" + "\n"
    result = result + "        level: 3 // 지도의 확대 레벨" + "\n"
    result = result + "    };  " + "\n"
    result = result + "// 지도를 생성합니다" + "\n"
    result = result + "var map = new kakao.maps.Map(mapContainer, mapOption); " + "\n"
    result = result + "// 장소 검색 객체를 생성합니다" + "\n"
    result = result + "var ps = new kakao.maps.services.Places();  " + "\n"
    result = result + "// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다" + "\n"
    result = result + "var infowindow = new kakao.maps.InfoWindow({zIndex:1});" + "\n"
    result = result + "// 키워드로 장소를 검색합니다" + "\n"
    result = result + "searchPlaces();" + "\n"
    result = result + "// 키워드 검색을 요청하는 함수입니다" + "\n"
    result = result + "function searchPlaces() {" + "\n"
    result = result + "   var keyword = document.getElementById('keyword').value;" + "\n"
    result = result + "    if (!keyword.replace(/^\s+|\s+$/g, '')) {" + "\n"
    result = result + "        alert('키워드를 입력해주세요!');" + "\n"
    result = result + "        return false;" + "\n"
    result = result + "    }" + "\n"
    result = result + "    // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다" + "\n"
    result = result + "    ps.keywordSearch( keyword, placesSearchCB); " + "\n"
    result = result + "}" + "\n"
    result = result + "// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다" + "\n"
    result = result + "function placesSearchCB(data, status, pagination) {" + "\n"
    result = result + "    if (status === kakao.maps.services.Status.OK) {" + "\n"
    result = result + "        // 정상적으로 검색이 완료됐으면" + "\n"
    result = result + "        // 검색 목록과 마커를 표출합니다" + "\n"
    result = result + "        displayPlaces(data);" + "\n"
    result = result + "        // 페이지 번호를 표출합니다" + "\n"
    result = result + "        displayPagination(pagination);" + "\n"
    result = result + "    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {" + "\n"
    result = result + "        alert('검색 결과가 존재하지 않습니다.');" + "\n"
    result = result + "        return;" + "\n"
    result = result + "    } else if (status === kakao.maps.services.Status.ERROR) {" + "\n"
    result = result + "        alert('검색 결과 중 오류가 발생했습니다.');" + "\n"
    result = result + "        return;" + "\n"
    result = result + "    }" + "\n"
    result = result + "}" + "\n"
    result = result + "// 검색 결과 목록과 마커를 표출하는 함수입니다" + "\n"
    result = result + "function displayPlaces(places) {" + "\n"
    result = result + "    var listEl = document.getElementById('placesList'), " + "\n"
    result = result + "    menuEl = document.getElementById('menu_wrap')," + "\n"
    result = result + "    fragment = document.createDocumentFragment(), " + "\n"
    result = result + "    bounds = new kakao.maps.LatLngBounds(), " + "\n"
    result = result + "    listStr = '';" + "\n"
    result = result + "    // 검색 결과 목록에 추가된 항목들을 제거합니다" + "\n"
    result = result + "    removeAllChildNods(listEl);" + "\n"
    result = result + "    // 지도에 표시되고 있는 마커를 제거합니다" + "\n"
    result = result + "    removeMarker();" + "\n"
    result = result + "    for ( var i=0; i<places.length; i++ ) {" + "\n"
    result = result + "        // 마커를 생성하고 지도에 표시합니다" + "\n"
    result = result + "        var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x)," + "\n"
    result = result + "            marker = addMarker(placePosition, i), " + "\n"
    result = result + "            itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다" + "\n"
    result = result + "        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해" + "\n"
    result = result + "        // LatLngBounds 객체에 좌표를 추가합니다" + "\n"
    result = result + "        bounds.extend(placePosition);" + "\n"
    result = result + "        // 마커와 검색결과 항목에 mouseover 했을때" + "\n"
    result = result + "        // 해당 장소에 인포윈도우에 장소명을 표시합니다" + "\n"
    result = result + "        // mouseout 했을 때는 인포윈도우를 닫습니다" + "\n"
    result = result + "        (function(marker, title) {" + "\n"
    result = result + "            kakao.maps.event.addListener(marker, 'mouseover', function() {" + "\n"
    result = result + "               displayInfowindow(marker, title);" + "\n"
    result = result + "            });" + "\n"
    result = result + "            kakao.maps.event.addListener(marker, 'mouseout', function() {" + "\n"
    result = result + "                infowindow.close();" + "\n"
    result = result + "            });" + "\n"
    result = result + "            itemEl.onmouseover =  function () {" + "\n"
    result = result + "                displayInfowindow(marker, title);" + "\n"
    result = result + "            };" + "\n"
    result = result + "            itemEl.onmouseout =  function () {" + "\n"
    result = result + "                infowindow.close();" + "\n"
    result = result + "            };" + "\n"
    result = result + "        })(marker, places[i].place_name);" + "\n"
    result = result + "        fragment.appendChild(itemEl);" + "\n"
    result = result + "    }" + "\n"
    result = result + "    // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다" + "\n"
    result = result + "    listEl.appendChild(fragment);" + "\n"
    result = result + "    menuEl.scrollTop = 0;" + "\n"
    result = result + "    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다" + "\n"
    result = result + "    map.setBounds(bounds);" + "\n"
    result = result + "}" + "\n"
    result = result + "// 검색결과 항목을 Element로 반환하는 함수입니다" + "\n"
    result = result + "function getListItem(index, places) {" + "\n"
    result = result + "    var el = document.createElement('li')," + "\n"
    result = result + "    itemStr = '<span class=\"markerbg marker_' + (index+1) + '\"></span>' +" + "\n"
    result = result + "                '<div class=\"info\">' +" + "\n"
    result = result + "                '   <h5>' + places.place_name + '</h5>';" + "\n"
    result = result + "    if (places.road_address_name) {" + "\n"
    result = result + "        itemStr += '    <span>' + places.road_address_name + '</span>' +" + "\n"
    result = result + "                    '   <span class=\"jibun gray\">' +  places.address_name  + '</span>';" + "\n"
    result = result + "    } else {" + "\n"
    result = result + "        itemStr += '    <span>' +  places.address_name  + '</span>'; " + "\n"
    result = result + "    }" + "\n"
    result = result + "      itemStr += '  <span class=\"tel\">' + places.phone  + '</span>' +" + "\n"
    result = result + "                '</div>';" + "\n"
    result = result + "    el.innerHTML = itemStr;" + "\n"
    result = result + "    el.className = 'item';" + "\n"
    result = result + "    return el;" + "\n"
    result = result + "}" + "\n"
    result = result + "// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다" + "\n"
    result = result + "function addMarker(position, idx, title) {" + "\n"
    result = result + "    var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다" + "\n"
    result = result + "        imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기" + "\n"
    result = result + "       imgOptions =  {" + "\n"
    result = result + "            spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기" + "\n"
    result = result + "            spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표" + "\n"
    result = result + "            offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표" + "\n"
    result = result + "        }," + "\n"
    result = result + "        markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions)," + "\n"
    result = result + "            marker = new kakao.maps.Marker({" + "\n"
    result = result + "            position: position, // 마커의 위치" + "\n"
    result = result + "            image: markerImage " + "\n"
    result = result + "        });" + "\n"
    result = result + "    marker.setMap(map); // 지도 위에 마커를 표출합니다" + "\n"
    result = result + "    markers.push(marker);  // 배열에 생성된 마커를 추가합니다" + "\n"
    result = result + "    return marker;" + "\n"
    result = result + "}" + "\n"
    result = result + "// 지도 위에 표시되고 있는 마커를 모두 제거합니다" + "\n"
    result = result + "function removeMarker() {" + "\n"
    result = result + "    for ( var i = 0; i < markers.length; i++ ) {" + "\n"
    result = result + "        markers[i].setMap(null);" + "\n"
    result = result + "    }   " + "\n"
    result = result + "    markers = [];" + "\n"
    result = result + "}" + "\n"
    result = result + "// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다" + "\n"
    result = result + "function displayPagination(pagination) {" + "\n"
    result = result + "    var paginationEl = document.getElementById('pagination')," + "\n"
    result = result + "        fragment = document.createDocumentFragment()," + "\n"
    result = result + "        i; " + "\n"
    result = result + "    // 기존에 추가된 페이지번호를 삭제합니다" + "\n"
    result = result + "    while (paginationEl.hasChildNodes()) {" + "\n"
    result = result + "        paginationEl.removeChild (paginationEl.lastChild);" + "\n"
    result = result + "    }" + "\n"
    result = result + "    for (i=1; i<=pagination.last; i++) {" + "\n"
    result = result + "        var el = document.createElement('a');" + "\n"
    result = result + "        el.href = "#";" + "\n"
    result = result + "        el.innerHTML = i;" + "\n"
    result = result + "        if (i===pagination.current) {" + "\n"
    result = result + "           el.className = 'on';" + "\n"
    result = result + "        } else {" + "\n"
    result = result + "            el.onclick = (function(i) {" + "\n"
    result = result + "                return function() {" + "\n"
    result = result + "                    pagination.gotoPage(i);" + "\n"
    result = result + "                }" + "\n"
    result = result + "            })(i);" + "\n"
    result = result + "        }" + "\n"
    result = result + "        fragment.appendChild(el);" + "\n"
    result = result + "    }" + "\n"
    result = result + "    paginationEl.appendChild(fragment);" + "\n"
    result = result + "}" + "\n"
    result = result + "// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다" + "\n"
    result = result + "// 인포윈도우에 장소명을 표시합니다" + "\n"
    result = result + "function displayInfowindow(marker, title) {" + "\n"
    result = result + "    var content = '<div style=\"padding:5px;z-index:1;\">' + title + '</div>';" + "\n"
    result = result + "    infowindow.setContent(content);" + "\n"
    result = result + "}" + "\n"
    result = result + "// 검색결과 목록의 자식 Element를 제거하는 함수입니다" + "\n"
    result = result + "function removeAllChildNods(el) {   " + "\n"
    result = result + "    while (el.hasChildNodes()) {" + "\n"
    result = result + "        el.removeChild (el.lastChild);" + "\n"
    result = result + "    }" + "\n"
    result = result + "}" + "\n"
    result = result + "//지도 현재 중심좌표" + "\n"
    result = result + "kakao.maps.event.addListener(map, 'center_changed', function() {" + "\n"
    result = result + "// 지도의  레벨을 얻어옵니다" + "\n"
    result = result + "var level = map.getLevel();" + "\n"
    result = result + "// 지도의 중심좌표를 얻어옵니다 " + "\n"
    result = result + "center = map.getCenter(); " + "\n"
    result = result + "var message = '<p>지도 레벨 ' + level + ' </p>';" + "\n"
    result = result + "message += '<p>위도 ' + center.getLat() + ', 경도 ' + center.getLng() + '</p>';" + "\n"
    result = result + "var resultDiv = document.getElementById('result');" + "\n"
    result = result + "resultDiv.innerHTML = message;" + "\n"
    result = result + "});" + "\n"
    result = result + "var center = map.getCenter();" + "\n"
    result = result + "//버튼클릭시" + "\n"
    result = result + "function button1_click(){" + "\n"
    result = result + "    position= [center.getLng(),center.getLat()]" + "\n"
    result = result + "    var width = $('#width').val();" + "\n"
    result = result + "    var height = $('#width').val();" + "\n"
    result = result + "    var zoomlevel = $('#zoomlevel').val();" + "\n"
    result = result + "    location.href='/about?index=' + position + '&width=' + width + '&height=' + height + '&zoomlevel=' + zoomlevel;" + "\n"
    result = result + "}" + "\n"
    result = result + "</script>" + "\n"
    result = result + "</body>" + "\n"
    result = result + "</html>" + "\n"

    return result

#2.html 생성
def getKakaoMap2HTML():
	#키입력
    javascript_key = ""
    
    result = ""
    result = result + "<!DOCTYPE html>" + "\n"
    result = result + "<head>" + "\n"
    result = result + "<meta charset='utf-8'/>" + "\n"
    result = result + "<script src='//dapi.kakao.com/v2/maps/sdk.js?appkey=" + javascript_key + "'></script>" + "\n"
    result = result + "</head>" + "\n"
    result = result + "<body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'>" + "\n"
    result = result + "<div id='map'></div>" + "\n"
    result = result + "<script>" + "\n"
    result = result + "//좌표전달받기" + "\n"
    result = result + "var para = document.location.href.split('=');" + "\n"
    result = result + "var posi = ((para[1]).split('&'))[0].split(',').map(Number);	//[y,x]" + "\n"
    result = result + "var width = Number((para[2].split('&'))[0]);" + "\n"
    result = result + "var height = Number((para[3].split('&'))[0]);" + "\n"
    result = result + "var zoomlevel = Number(para[4]);" + "\n"
    result = result + "var style_1 = document.getElementById('map');" + "\n"
    result = result + "style_1.style.width = width + 'px';" + "\n"
    result = result + "style_1.style.height = height + 'px';" + "\n"
    result = result + "var mapContainer = document.getElementById('map'), // 지도를 표시할 div " + "\n"
    result = result + "	mapOption = {" + "\n"
    result = result + "		center: new kakao.maps.LatLng(posi[1], posi[0]), // 지도의 중심좌표" + "\n"
    result = result + "		level: zoomlevel, // 지도의 확대 레벨" + "\n"
    result = result + "		mapTypeId : kakao.maps.MapTypeId.SKYVIEW // 지도종류" + "\n"
    result = result + "	}; " + "\n"
    result = result + "// 지도를 생성한다 " + "\n"
    result = result + "var map = new kakao.maps.Map(mapContainer, mapOption);" + "\n"
    result = result + "</script>" + "\n"
    result = result + "</body>" + "\n"

    return result

#pyinstaller 파일경로 찾기
def resource_path(relative_path):
    if hasattr(sys, '_MEIPASS'):
        return os.path.join(sys._MEIPASS, relative_path)
    else:
        return os.path.join(os.path.abspath("."), relative_path)
        
#main
map_1html = getKakaoMap1HTML()  #1.html 생성
map_2html = getKakaoMap2HTML()  #2.html 생성

#1.html 저장
work_path = resource_path('')  #현재경로확인
print(work_path)  #현재경로확인
os.makedirs(work_path + '\\templates', exist_ok = True)   #현재경로에 폴더생성

with open(work_path + "\\templates\\1.html", 'w', encoding = 'UTF8') as html_1file:    #HTML생성
    html_1file.write(map_1html)

#2.html 저장
with open(work_path + "\\templates\\2.html", 'w', encoding = 'UTF8') as html_2file:    #HTML생성
    html_2file.write(map_2html)

#Flask 로컬호스트
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('1.html')

@app.route('/about')
def about():
    return render_template('2.html')

if __name__== "__main__":
    threading.Timer(0.50, lambda: webbrowser.open("http://localhost:{}".format(8080))).start()  #시간지연실행
    print()
    print("!!!!!!!!!!!!!!!!!Ctrl + C 를 눌러 종료하세요!!!!!!!!!!!!!!!!!")
    print("닫기로 종료시, C:\\Users\\사용자\\AppData\\Local\\Temp\\_MEI 랜덤숫자 폴더가 남습니다.")
    print()
    app.run(host="localhost", port="8080")

 

 

 

 

 

반응형