이온디님의 [EOND] Georo2 - 카카오지도 기반 게시판스킨 을 참고하였고,
마트몬님의 https://xetown.com/questions/1382778 글도 참고 하였습니다.
기존의 스케치북게시판에 적용하는 방법입니다.
원래 이온디님의 게시판도 스케치북을 기반으로 만들어졌더군요 따로 게시판을 두기 싫어서 기존의 스킨에 적용해 봅니다.
1. 주소가 없는 위치(바다 or 강 or 외국)를 클릭시 좌표로 입력되며 위치명이 Info 에 출력
![Screenshot 2020-04-29 at 23.35.06.jpg](/files/attach/images/2020/04/29/afd5bdb2fca8efe7bf33a8227ef13e54.jpg)
- 주소가 없는 위치의 경우는 List 상단에 출력되는 전체출력 Map 에는 나타나지 않습니다.
2. 모바일로 글 작성시는 현재위치의 좌표가 자동으로 찍힙니다.
![Screenshot 2020-04-29 at 23.37.53-crop.jpg](/files/attach/images/2020/04/29/fd60a5bd2a23742206a7244a1c75ade8.jpg)
- PC의 경우는 현재위치가 정확하지 않으므로 좌표가 자동으로 찍히지 않습니다.
1. 지도 클릭으로 위치 생성시 좌표로 입력되던 방법을 주소입력으로 수정
- List 상단에 출력되는 전체출력 Map 에 마크 표시 가능
- "사용자 정의 이름" "addess" 의 형식을 "한국 주소"에서 "한줄 입력칸"으로 부득이 수정(약간은 불편)
- "위치명"을 작성하지 않으면 "상세주소"로 대치
- Info 판넬안에 "우편번호" 대신 "전화번호"로 변경 ("사용자 정의 이름" "tel" 생성한후 형식을 "전화번호 형식")
![Screenshot 2020-04-29 at 23.40.40.jpg](/files/attach/images/2020/04/29/87a3d0bfe5934ee19cd38afe25ba46dd.jpg)
1. 기존의 스케치북 스킨에도 설정에 가면 "
이곳에 카카오톡 "Javascript 키"를 입력하셔야 합니다.
[ https://developers.kakao.com 에 접속해서 발급 ]
[ 스케치북 모바일설정 ]
2. 지도에 필요한 앱키 설정을 합니다.
3개의 파일에 모두 작성하는게 싫어서 __setting.html 아래에 넣었습니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={$mi->kakao_key}&libraries=services,clusterer"></script>
3. skin.xml 에 설정을 등록합니다.
<title xml:lang="ko">본문 Map 출력</title>
<var name="extra_map" type="radio">
<title xml:lang="ko">Map 출력</title>
<description xml:lang="ko">사용자정의 이름 shop, address 등으로 한줄입력칸으로 등록 / 목록, 웹진, 거래장형에만 적용</description>
<options value="">
<title xml:lang="ko">출력 않음(기본)</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
</options>
</var>
<var name="list_map" type="select">
<title xml:lang="ko">리스트상단에 Map 출력</title>
<description xml:lang="ko">리스트 상단에 지도 출력</description>
<options value="">
<title xml:lang="ko">출력</title>
</options>
<options value="N">
<title xml:lang="ko">출력 않음</title>
</options>
</var>
<var name="extra_img_title" type="text">
<title xml:lang="ko">이미지출력칸 제목</title>
<description xml:lang="ko">미기재시 이미지출력칸 출력안함 (Ex : 업종사진)</description>
</var>
<var name="shop_name_title" type="text">
<title xml:lang="ko">상호출력칸 제목</title>
<description xml:lang="ko">미기재시 상호출력칸 출력안함 (Ex : 업종명)</description>
</var>
<var name="shop_name_e" type="text">
<title xml:lang="ko">상호출력칸 확장변수 No</title>
<description xml:lang="ko">(기본 1)</description>
</var>
<var name="getAdd" type="text">
<title xml:lang="ko">주소 확장변수 No</title>
<description xml:lang="ko">(기본 2)</description>
</var>
<var name="getLat" type="text">
<title xml:lang="ko">위도 확장변수 No</title>
<description xml:lang="ko">(기본 7)</description>
</var>
<var name="getLng" type="text">
<title xml:lang="ko">경도 확장변수 No</title>
<description xml:lang="ko">(기본 8)</description>
</var>
<var name="getLevel" type="text">
<title xml:lang="ko">레벨 확장변수 No</title>
<description xml:lang="ko">(기본 9)</description>
</var>
</group>
4. write_form.html 파일에 추가
<include cond="$mi->extra_map =='Y'" target="write_map.html" />
<div class="editor">{$oDocument->getEditor()}</div>
5. _read.html 파일에 추가
<block cond="!$mi->extravar_print">
<table cond="!$mi->et_var && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb cont">
<caption class="blind">Extra Form</caption>
~~ 중략 ~~
</table>
</block>
<include cond="$mi->extra_map =='Y'" target="_read_map.html" />
6. list.html 파일에 추가
<!--// 뷰어로 보기 -->
<include cond="$mi->default_style=='viewer' && $grant->view" target="_viewer.html" />
<block cond="$mi->default_style!='viewer'">
<load target="js/jquery.masonry.min.js" type="body" />
<include cond="$mi->extra_map =='Y'" target="map.html" />
7. Map 1.2.zip 압축파일을 내려 받아 압축을 풀어서
kmap.css - css폴더에
eond.js - js폴더에
_read_map.html / map.html / write_map.html - 스케치북 폴더에
img폴더 이미지 - img폴더에
각각 업로드 합니다.
8. 게시판설정에서 "사용자 정의"를 추가합니다.
"사용자 정의 이름"은 동일하게 작성하여야 작동합니다.
9. "스킨 관리"에서 설정
10. 글 작성시 주소 직접 입력시 지도 클릭은 하지 마세요. 둘 다 선택시 [주소 칸 입력]이 우선합니다.
위치명 입력하지 않으면 상세주소로 대치됩니다.
- 주소 검색으로 지도에 표시
상호, 마크, 주소, 전화번호, 마크 클릭시 홈피 바로가기, 큰지도 보기, 업종으로 검색도 가능
- 지도 클릭으로 표시
등록하고 싶은 위치를 클릭하면 주소, 위도, 경도, 레벨이 자동으로 지도 상단의 칸에 자동으로 입력됩니다.
이 경우 위도,경도는 출력에 필요가 없지만 아래의 경우를 위해서 그냥 둡니다.
- 주소가 존재하지 않는 지도 클릭
(Ex : 바다, 강)
등록하고 싶은 위치를 클릭하면 위도, 경도, 레벨이 자동으로 지도 상단의 칸에 자동으로 입력됩니다.
그러나 Info판넬은 생성되지 않습니다.(차후 보완 예정이나 잘 될지~)
10. 글 목록상단에 전체 리스트 출력
- 스케치북 게시판 검색 기능을 사용가능합니다.
- 검색된 상호를 클릭시 본문이 츨력됩니다.
- 주소가 존재하지 않는 리스트는 출력되지 않습니다.
p.s 이온디님의 자료는 "재배포 금지"인데 이렇게 수정해서 팁으로 남겨도 될지 모르겠네요...
근데 제가 다음에 사용시 사용법을 잊어 버리지 않으려고 작성해 봅니다.
혹시 문제가 된다면 내리겠습니다.
그리고 마트몬님의 질문에 대한 정확한 답변은 되지를 못했지만 수동으로는 구현했습니다.^.^
어떻게 하면 자동으로 위도, 경도에 들어갈 수 있을까... 으! 하수의 비애ㅠㅠ
p.s 1. 마트몬님의 가르침이 있어서 자동으로 위도, 경도, 레벨 자동으로 추가하는 방법 적용했습니다.
마트몬님 감사합니다^.^
p.s 2. 이 팁 적용하면서 카카오지도에 대해서 많이 배웠습니다.
근데 며칠 팠더니 힘드네요~ 휴