로그인

검색

Extra Form
추천지수 8
주소 04524 서울 중구 세종대로 110 (서울 중구 태평로1가 31) (태평로1가, 서울특별시청)
상호명 서울시청

라이믹스로 커뮤니티를 만들고 회원이 글을 쓰게 했을때 만약 위치정보가 필요해서 글 작성자에게 지도를 넣으라고 하면 굉장히 어려운 작업이 됩니다. 물론 에디터컴퍼넌트에 지도도구라는 것이 있긴 하지만 사실 일반적인 글을 쓰고 파일을 첨부하는 정도의 일만 해본 일반인은 굉장히 부담스럽고 쉽게 하지 못하는 작업이 됩니다.

 

실제로 지도도구를 사용할 있게 하고 회원들에게 지도를 넣어달라고 해서 운영을 해보면 지도가 들어가는 게시글은 굉장히 낮은 비율이고 대부분 지도를 넣지 못하게 됩니다.

 

이렇게 할 바에는 차라리 어차피 입력 받은 주소를 이용해서 자동으로 지도와 위치 마커를 표시해주는게 운영자나 사용자 모두에게 큰 이득이 될 것입니다.

 

 

카카오 api 자바스크립트키 준비

우선 카카오지도를 사용할 것이니 카카오 자바스크립트키가 있어야 합니다.

 

https://developers.kakao.com/

 

위 카카오 개발자센터에 애플리케이션등록(쉽게 말하면 사이트등록)을 하면 자바스크립트키가 만들어지니 이 자바스크립트키를 먼저 확보해 주세요.

이부분 자세한 설명은 다루지 않겠습니다.

 

 

 

 

사용자정의 생성

 

비로그인 시는 글 도입부만 보입니다. 로그인 시 글 전체를 열람하실 수 있습니다.

위치정보

Who's 주인장

profile

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가 자동으로 복사 됩니다

Atachment
첨부 '0'
  • 벨로위키 2021.04.17 15:04
    또 헤메고 있습니다.


    _read_html


    맨하단에 스크립트 넣기


    <!--// 목록 보이지 않을 때 보이는 하단 메뉴 -->

    <div cond="$mi->rd_lst && $mi->default_style!='blog'" >

    <div >

    <a href="{getUrl('document_srl','')}"><i ></i> {$lang->cmd_list}</a>

    <a href="#bd_{$mi->module_srl}"><i ></i> {$lang->cmd_move_up}</a>

    </div>

    <div >

    <block cond="$mi->prev_next=='2' && !$oDocument->isNotice()">

    <a href="#">{$lang->cmd_prev}</a>

    <a href="#">{$lang->cmd_next}</a>

    </block>

    <a cond="!$mi->write_btm_btn || ($mi->write_btm_btn!='N' && $grant->write_document)" href="{getUrl('act','dispBoardWrite','document_srl','')}"><b ></b> {$lang->cmd_write}</a>

    </div>

    </div>


    <hr />

    <block cond="$oDocument->getExtraEidValue('address')[1]">

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오자바스크립트키&libraries=services,clusterer,drawing"></script>

    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

    <script>

    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div

    mapOption = {

    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표

    level: 3 // 지도의 확대 레벨

    };

    // 지도를 생성합니다

    var map = new kakao.maps.Map(mapContainer, mapOption);

    var mapTypeControl = new daum.maps.MapTypeControl();

    map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

    var zoomControl = new daum.maps.ZoomControl();

    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

    // 주소-좌표 변환 객체를 생성합니다

    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다

    geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[1];}', 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 >{$oDocument->getExtraEidValueHTML('place_name');}</div>'

    });

    infowindow.open(map, marker);

    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다

    map.setCenter(coords);

    }

    });

    </script>

        </block>



    그리고 본문에 출력 


            <article>{$oDocument->getContent(false)}</article>

    <p cond="$mi->bon_ha_html_YesNo!='N'">

    <br/>

    {$mi->bon_ha_html}

    </p>

    <div cond="$oDocument->getExtraEidValue('address')[1]"></div>


    <div cond="$mi->img_insert=='3'" >

    <block loop="$oDocument->getUploadedFiles()=>$key,$file">

    <block cond="!$mi->img_insert2">

    {@

    $ext=substr($file->source_filename, -4);

    $ext=strtolower($ext);

    $extImg=in_array($ext,array('.jpg','jpeg','.gif','.png'));

    }

    </block>

    <block cond="$mi->img_insert2">

    {@

    $ext=substr($file->source_filename, -15);

    $ext=strtolower($ext);

    $extImg=in_array($ext,array('_rd_gallery.jpg','rd_gallery.jpeg','_rd_gallery.gif','_rd_gallery.png'));

    }



    카카오스크립트 키는 넣었습니다. 

  • profile
    주인장 2021.04.17 15:10
    To.벨로위키

    그리고 본문에 출력

    <div cond="$oDocument->getExtraEidValue('address')[1]"></div>

    이부분에 왜 id 값이 빠져있나요??? id와 style 모두 넣어야 합니다. 



    그리고 지금 어느 게시판에 적용하고 계신가요?

    소스보기를 해도 스크립트가 보이지도 않네요.

  • 밸로위키 2021.04.17 15:21
    To.주인장
    <hr id="rd_end_{$oDocument->document_srl}" class="rd_end clear" />
    <block cond="$oDocument->getExtraEidValue('address')[place_name]">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=319b5b6af6072a02ae97fe73c40f077e&libraries=services,clusterer,drawing"></script>
    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
    <script>
    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
    };

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

    var mapTypeControl = new daum.maps.MapTypeControl();
    map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
    var zoomControl = new daum.maps.ZoomControl();
    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

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

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[place_name];}', function(result, status) {


    이런식으로 수정하는게 아닌가요? id 는 함수변수명 스타일은 뭔지 잘 모르겠어요.
  • profile
    주인장 2021.04.17 15:23
    To.밸로위키
    이상하게 바꾸지 마시고 제가 적어드린대로 해주세요. 그리고 어디 게시판에 적용해는지 알려주시구요.
  • 벨로위키 2021.04.17 15:25
    To.주인장
    https://feedzone.club/board_MJxR97

    여기입니다.

    다시 한번 찬찬히 보고 적용해 볼게요
  • profile
    주인장 2021.04.17 15:27
    To.벨로위키

    스크립트 이상하게 바꾼거 원래대로 다 돌리시구요.

    1.주소 사용자정의 address 로 정확히 하셨나요? 아니면 지금 주소 입력된 곳의 id로 바꿔서 스크립트 모든 부분을 다 바꿔줬나요?

    2.상호명 표시될 사용자정의는 place_name으로 생성하셨나요?


    1번이 아니오 라면 스크립트는 실행되지 않습니다.

  • 벨로위키 2021.04.17 16:10
    To.주인장
    상호명까지 해야 하는지 지금 보고 다시 잘 적용 된것 같은데 아직 출력이 안되네요.

    혹시 출력 부분 자리를 잘못잡은걸까요?



    <article>{$oDocument->getContent(false)}</article>

    <p cond="$mi->bon_ha_html_YesNo!='N'">
    <br/>
    {$mi->bon_ha_html}
    </p>
    <div id="map" style="width:100%;height:350px;" cond="$oDocument->getExtraEidValue('address')[1]"></div>


    <div cond="$mi->img_insert=='3'" class="xe_content rd_gallery">
    <block loop="$oDocument->getUploadedFiles()=>$key,$file">
    <block cond="!$mi->img_insert2">
    {@
    $ext=substr($file->source_filename, -4);
    $ext=strtolower($ext);
    $extImg=in_array($ext,array('.jpg','jpeg','.gif','.png'));
    }
    </block>
  • profile
    주인장 2021.04.17 16:13
    To.벨로위키
    주소 사용자정의 id 값을 address 로 정확히 일치시켜야 한다고 말씀 드렸는데 이부분 답이 없으시네요.
  • To.주인장

    스크린샷 2021-04-17 16.14.44.png

     

    이렇게 하는것 아닌가요?

  • 벨로위키 2021.04.17 16:16
    To.벨로위키
    카카오 스크립트 키는 변경한 후 맨 하단에 이렇게 넣었습니다.


    <block cond="$oDocument->getExtraEidValue('address')[1]">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=319b5b6af6072a02ae97fe73c40f077e&libraries=services,clusterer,drawing"></script>
    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
    <script>
    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
    };
  • profile
    주인장 2021.04.17 16:17
    To.벨로위키

    address 에서 d 하나가 빠졌습니다.

    그리고 기존 게시글 수정하셔서 상호를 넣어주셔야 상호도 지도에 표시됩니다.

  • 벨로위키 2021.04.17 16:20
    To.주인장
    수정하니 뭔가 나오려는지 자리가 생기긴 한것 같습니다.
    https://feedzone.club/board_MJxR97/6582
  • profile
    주인장 2021.04.17 16:25
    To.벨로위키

    카카오자개발자 애플리케이션 등록 자바스크립트키가 유효한가요?

    작업하실때 브라우저 콘솔 에러를 보시는 것을 추천해드립니다.

  • 벨로위키 2021.04.17 16:37
    To.주인장
    키를 새로 발급 받아서 적용했는데도 안되네요. 콘솔에러는 이렇게 뜹니다.

    widget.css:1 Failed to load resource: the server responded with a status of 404 ()
    sdk.js:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
    sdk.js:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
    6582:3440 Uncaught ReferenceError: kakao is not defined
    at 6582:3440
    4rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    37board.js?20180408162204:379 Uncaught TypeError: Cannot read property 'top' of undefined
    at board.js?20180408162204:379
    at dispatch (jquery-2.2.4.min.js?20210416110452:3)
    at r.handle (jquery-2.2.4.min.js?20210416110452:3)
    widget.css:1 Failed to load resource: the server responded with a status of 404 ()
  • profile
    주인장 2021.04.17 16:42
    To.벨로위키
    엉뚱한걸 넣으신간 아닐지.. 자바스크립트 키 인증 문제는 제가 해결해드릴수 있는 영역이 아니라서요.
  • 벨로위키 2021.04.17 16:45
    To.주인장
    자바스크립트 키 새로 받은게 인증 받는데 시간이 좀걸리나요?
    일단 지금 에러코드보니 뜬금 업는 이온디님 위젯코드 에러도 있네요.
    자바스크립트키쪽을 좀 더 둘러 보겠습니다.

    GET https://feedzone.club/widgets/rank_exp/skins/eond/css/widget.css net::ERR_ABORTED 404
    5A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.
    kakao.js:31 Uncaught TypeError: Cannot read property 'currentStyle' of null
    at h.bb [as constructor] (kakao.js:31)
    at h.rc [as constructor] (kakao.js:34)
    at new h (kakao.js:43)
    at 6582:3445
    bb @ kakao.js:31
    rc @ kakao.js:34
    h @ kakao.js:43
    (anonymous) @ 6582:3445
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    207board.js?20180408162204:379 Uncaught TypeError: Cannot read property 'top' of undefined
    at board.js?20180408162204:379
    at dispatch (jquery-2.2.4.min.js?20210416110452:3)
    at r.handle (jquery-2.2.4.min.js?20210416110452:3)
    (anonymous) @ board.js?20180408162204:379
    dispatch @ jquery-2.2.4.min.js?20210416110452:3
    r.handle @ jquery-2.2.4.min.js?20210416110452:3
  • profile
    주인장 2021.04.17 16:47
    To.벨로위키

    그건 위젯 css 파일이 없다는 거구요. 아마 날아갔겠죠.

    키 문제는 그런일이 있는지 모르겠구요.

    뭔가 잘못하고 계실거라는 추측만...

  • 벨로위키 2021.04.17 16:51
    To.주인장
    저런 에러코드들은 무시해도 괜찮을까요?
  • profile
    주인장 2021.04.17 16:55
    To.벨로위키
    아니요. 날라간 파일을 다시 업로드해줘야죠. 지금 css가 적용 안되니 이상하게 출력되겠죠.
  • To.주인장

    스크린샷 2021-04-17 17.02.31.png.jpg

    제가 쓰는 편집기가 vi code 라는건데 지금 빨간색 부분으로 된 곳이 왜 주석 처리가 안되고 코드로 인식될까요?

  • profile
    주인장 2021.04.17 17:09
    To.벨로위키
    주석형이 쓰이는 곳에 주석을 하면 편집기가 문제가 아니라 라이믹스에서도 에러가 날 수 있습니다. 왠만하면 주석형이 있는 부분에 주석을 하는 것은.....
  • 벨로위키 2021.04.17 17:36
    To.주인장
    이건 제가 주서거리 한게 아니라 스케치북 코드가 이렇게 되어 있어서요. 아무래도 주석으로 처리하거나 지워야할것 같아서 문의 드려봤습니다. 왜 주석이 안되는지 이유를 모르겠네요.
  • profile
    주인장 2021.04.17 17:37
    To.벨로위키

    주석이 아니고 주석형 조건문인데.. 무슨말인지 잘 모르겠네요..

    코드는 이상없으니 그냥 두셔야 합니다.

  • 벨로위키 2021.04.17 17:38
    To.주인장
    아 주석형 조건문도 있군요. 제가 주석으로 착각했나봅니다. 그래도 빨간색이라 불안하긴 하네요.
  • profile
    주인장 2021.04.17 17:40
    To.벨로위키
    불안하실 일아니고 편집기들이 cms의 템플릿 문법을 다 알지 못하기에...
  • profile
    주인장 2021.04.17 17:10
    To.벨로위키
    지도스크립트를 뒤쪽에 나오도록 제가 작성한 대로 되도록 해주세요. 저도 이제 시간이 없어서 도움 드리기 어렵습니다.
  • profile
    주인장 2021.04.17 17:04
    To.벨로위키

    자바스크립트키 문제는 해결이 된 것 같습니다.
    그런데 지도 출력하는 위치하고 스크립트 위치가 바뀌어서 지금 지도가 못나오고 에러가 납니다.

    스크립트 위치를 맨 하단으로 해달라고 작성했는데 위치를 바꾸신 이유가.....

  • 벨로위키 2021.04.17 17:31
    To.주인장
    현재는 맨 하단에 달았습니다. 안되다 보니 맨 하단이 스크립트의 맨 하단인가 하고 잠시 이동해서 테스트 했었습니다.
    긴 시간 너무 감사 합니다. 나머지는 제가 스스로 찾아볼게요.
  • To.벨로위키

    스크린샷 2021-04-17 17.32.27.png

    와 정말 멋집니다.

     

    감사 합니다!!

  • 벨로위키 2021.05.03 10:30

    새로 적용한 게시판 스킨에 적용 했습니다. 별문제 없는 것 같긴 한데 혹시 몰라서 문의 드려봅니다. 콘솔에러 괜찮을까요? 

    A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.

  • profile
    주인장 2021.05.03 10:33
    To.벨로위키
    큰문제는 아니고 카카오쪽에서 처리해야할 문제로 보입니다.

라이믹스 팁(64)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. Read More
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views25 6
    Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. 본문 게시글 주소 클립보드 복사 기능 만들기 8UP

    Date2021.04.06 Category기능 Views56 7
    Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
Board Pagination Prev 1 2 3 Next
/ 3