https://xetown.com/point_contents/1227531에 업데이트 된 버전이 업로드 되었습니다.

English

Summary

  • This program (map component) is developed by XE Public Project.
  • map component is an editor component of XpressEngine or Rhymix.
  • This software supports various maps APIs (OpenStreetMap, Google, Kakao, Naver maps API).
    • The default map is OpenStreetMap without API key.
    • To display OpenStreetMap, this software contains Leaflet as a library.
    • Google, Kakao, Naver maps API requires API key(s) to display them. Google Maps API allows a little query capacity for a test, but it is very small for a service.
  • Easy to use
    • one click marker creation and deletion
    • drag the marker to move (except Naver maps API)
    • double-click the map on the WYSIWYG editor to modify it.

License

Installation directory

  • ./modules/editor/components/map_components

How to install map component

  1. Copy map component files to the right (see above) directory
  2. Click editor menu ( /index.php?module=admin&act=dispEditorAdminIndex ) on the admin page of XpressEngine or RhymiX
  3. See the map item on the bottom of the page as an editor component, and check to activate it.

한국어

특징

  • XE Public 프로젝트를 통해 개발되고 있는 컴포넌트 입니다.
  • 다양한 지도 API를 지원합니다. (네이버 지도, 카카오 지도, 구글 지도, 오프스트리트맵 API 지원)
    • 아무 설정도 하지 않았을 때 기본 지도는 오픈스트리트맵 입니다.
    • 이 소프트웨어는 오픈스트리트 지도를 나타내기 위해서 Leaflet 라이브러리를 포함합니다.
    • 구글, 카카오, 네이버 지도를 이용하려면 API 키가 필요합니다.
  • 쉬운 사용법
    • 클릭 한번으로 마커 생성과 삭제 가능
    • 생성된 마커를 드래그해서 위치 이동 가능 (네이버 지도를 사용하는 경우는 불가능)
    • 위지윅 에디터 상에 나타난 지도를 더블클릭해서 지도 수정 가능

사용권

설치 위치

  • ./modules/editor/components/map_components

설치 방법

  1. 지도 에디터 컴포넌트 파일을 복사 합니다.(쉬운설치의 경우 쉬운 설치를 완료합니다.)
  2. 관리자 페이지 왼쪽 메뉴 하단에 아래쪽 화살표를 클릭하고, 고급 > 에디터( /index.php?module=admin&act=dispEditorAdminIndex )에 접속합니다.
  3. 맨 하단 '에디터 컴포넌트' 중 '지도' 가 생성된 것을 확인하고 오른쪽 '사용' 체크박스에 체크합니다.
  4. 네이버나 카카오 지도를 사용하시려면, '지도' 항목의 제목인 [지도] 글자를 클릭합니다.
  5. 지도 API Key 항목에 사용하고 싶은 지도의 API 키 ― 네이버 또는 카카오 지도 API 키 ― 를 입력합니다.
  • 네이버의 경우 Secret Key와 Client-Id, 카카오의 경우 REST API 키와 Javascript 키를 모두 입력하셔야 정상적으로 이용하실 수 있습니다.

사용 방법

  1. 에디터의 확장 컴포넌트에 나타난 지도 컴포넌트를 클릭하면 새 창에 지도 컴포넌트가 나타납니다.
  2. 상단에 [지도]라는 제목을 한번 클릭해봅니다.
  3. 나타난 안내 화면을 읽습니다.
  4. 안내 화면의 문구대로 따라합니다. 오른쪽 지도를 클릭 해보고, 나타난 마커를 한번 클릭해봅니다.
  5. 왼쪽 검색 창도 이용해봅니다.
  6. 지도 편집을 완료했다면, 좌측 하단 [지도 넣기] 버튼을 이용해서 지도를 본문에 입력합니다.
  7. 지도를 수정해야 한다면, 위지윅 에디터 상에 삽입된 지도를 더블클릭합니다.
  8. 지도 크기를 수정해야 한다면, 위지윅 에디터 상에 삽입된 지도를 한번 클릭하고 모서리에 나타난 점을 이용해서 크기를 변경합니다.(IE 만 지원)

바뀐 점

  • 한 페이지에 여러 지도를 넣을 경우, 하나의 지도만 표시되던 문제 수정. ( @misol )

알려진 내용

  • 네이버 지도에서도 마커를 드래그하면서 편집할 수 있습니다.
  • 숫자 입력을 통해 크기를 조절하는 기능은 추가되지 않을 예정입니다. 숫자 입력을 통해 크기 조절을 원하시는 경우, 지도 자체는 100% width를 가지므로 지도를 포함하는 요소의 크기를 변경하셔서 조절하실 수 있습니다.

쉬어가는 음악

TWICE(트와이스) "Heart Shaker" M/V

 

  • profile
    감사합니다~~~ ^_______^
  • profile
    미솔님 감사합니다.
  • profile
    미솔님! 4.네이버나 카카오 지도를 사용하시려면, '지도' 항목의 제목인 [지도] 글자를 클릭합니다.
    이게 적용이 안되네요~ 화면 첨부할수 없어 링크 걸어 봅니다. (링크 삭제함)
  • profile ?
    관리자 페이지에서 왼쪽 메뉴 고급 > 에디터 > 지도 (스크롤을 쭉 내려보세요)입니다.
    알려주신 사이트 주소로 미루어 보았을때 아래 주소입니다.
    https://www.ggotji.com/index.php?module=admin&act=dispEditorAdminSetupComponent&component_name=map_components
  • ? profile
    앗! 초보적인 실수를 했네요~ 에디터 상에서 설정이 연결되는 줄 알았네요 ㅠㅠ
    감사합니다^^ 바로 보입니다.
  • profile ?
    잘 쓰세요! ㅎㅎ
  • ?
    미솔님 고맙습니다.~~
    구글 MAP API 다양한 기능도 검토해 주세요
    감사합니다.
  • profile
    감사합니다. 미솔님 ~~
  • ?
    정말 감사합니다!!
  • profile
    감사합니다~
  • ?
    좋은 모듈 감사합니다.

    사용하는데 오류가 발견되어 문의드립니다.

    한 게시물에 여러개의 지도를 입력할 경우 에디터상에서는 개별적으로 보이나
    게시물상에서는 지도가 겹쳐서 보이게 됩니다.

    현재 사용중인 환경은 xe 1.9.3이고 게시판은 스케치북 멀티미디어 게시판 사용중입니다.
    혹시 홈페이지 상의 호환성 문제인지 문의드려봅니다...
  • ? ?
    문제를 확인했습니다.. 늦어서 죄송합니다. 수정하도록 하겠습니다.
  • ? ?
    1.4.4 버전에서 수정되었습니다 :) 다시 다운로드 받으셔서 설치하시기 바랍니다.
    감사합니다.
  • ?
    늘 도움만 받네요...감사합니다.
  • profile
    감사합니다.
  • ?
    감사합니다.!!
  • ?
    미솔님 지도 검색이 안됩니다. 확인부탁드립니다. 감사합니다.
  • ? ?
    검색이 잘 되는 것으로 확인했습니다.
  • ?
    감사합니다.
  • profile
    다음 카카오 지도로 사용하고 있습니다. 그런데 예전과 다르게 언제부터인가..
    지도 넣기를 한 후 엗디터상에서 지도 모양이 아닌
    붉은 점선 박스안에 굉장히 긴 문자열이 나타납니다. 맨처음에는 이미지엑박모습이 보이구요.
    소스보기로 보면
    <img alt="Tzo4OiJzdGRDbGFzcyI6NTp7czoxMDoibWFwX2NlbnRlciI7czozNjoiMzcuNTY5OTY4OTExMzA4NzQsMTI2Ljk3OTk4NzA2NjE2MTU2IjtzOjU6IndpZHRoIjtzOjM6IjYwMCI7czo2OiJoZWlnaHQiO3M6MzoiMzAwIjtzOjExOiJtYXBfbWFya2VycyI7czowOiIiO3M6ODoibWFwX3pvb20iO3M6MjoiMTUiO30=" editor_component="map_components" src="https://maps-api-ssl.google.com/maps/api/staticmap?center=37.56996891130874,126.97998706616156&zoom=15&size=600x300&sensor=false" style="border:2px dotted #FF0033; no-repeat center;width: 600px; height: 300px;" />
    이렇게 나옵니다.
    지도를 삽입한 후 글 등록을 하기 전 까지는 저렇게 보이는게 정상인가요?
  • profile ?
    예전에 삽입한 지도는 구글 지도를 정적 지도로 사용했기 때문에 해당 문제가 있을 수 있습니다만, 현재 버전은 다음 지도 API의 정적 지도를 사용하고 있어서 다음 지도를 사용할 경우 문제가 없어야 합니다. (소스보기를 보면 정적 지도를 구글 지도로 사용하고 있는 코드입니다.) 업데이트 이후에 지도를 입력하신 다음에도 같은 문제가 발생하고 있나요?
  • profile ?
    이 컴포넌트는 저도 계속 사용중이라서, https://misol.kr/index.php?mid=footprint&act=dispBoardWrite 에서 테스트 해보실 수 있습니다. 저도 다음 지도 API로 사용하고 있습니다.
  • ? profile
    게시글을 등록하면 정상으로 다음지도가 보입니다. 다만 에디터상에서 지도삽입시 알아보기 어려운 형태로 보여집니다.
  • ? profile
    여가서 테스트시에는 에디터상에서도 잘 보이고 소스를 봐도 다음지도의 주소입니다. 저희는 XE라서 그런걸까요?
  • profile ?
    XE라도 여기 올라와져있는 버전을 사용하셨으면 똑같이 동작해야 합니다... 다른 문제가 있는건지 시간을 두고 자세히 살펴보겠습니다.
  • ? profile
    지도 API Key 를 공란으로 두면 에디터에 지도삽입시 지도가 나오긴 하는데 카카오,구글 지도는 아닌 것 같습니다.

    카카오 계정의 자바스크립트키를 넣으면 지금 증상이 나타납니다.
    다음api가 카카오로 통합되어서 카카오계정의 것으로 넣었습니다.
  • ? profile
    제가 api 키도 몇번을 다시 넣어보고 해도 무조건 지금 구글지도로 삽입이 되어 버리네요. php 파일을 열어보아도 api를 구분하는 부분이 있던데 저희는 코드 중 어디에서 카카오사용을 체크못하는 것 같습니다.

    삽입된 소스를 테스트 사이트의 소스로
    src="https://spi.maps.daum.net/map2/map/imageservice?IW=600&IH=300&MX=495580&MY=1130665&SCALE=10&service=open" style="border:2px dotted #FF0033; no-repeat center;width: 600px; height: 300px;"

    교체하면 다음지도가 잘 보입니다. ㅡㅡ;

    저희 서버는 php7.2 / XE를 사용하고 있습니다.
    사용자들이 오류난 것으로 생각해 지도를 넣지 못하게 되는 것 같아 이부분 꼭 오류를 고치고 싶습니다.
  • profile ?
    오늘 (내일 아침 전까지) 중으로 고쳐보겠습니다.
  • ? profile
    방금 고쳤습니다.
    원인) 이전에 배포하실대 tpl/ js 파일들을 min.js 로 배포하셨습니다.

    그런데 최근에 .js 로 바꿔 배포하셨습니다.

    저희처럼 업데이트를 하는 사이트에서는 두가지 파일을 함께 가지게 되었고
    디버그를 사용하지 않는 경우 자동으로 min.js 를 로딩하게 되므로써 이전 js 파일이 불러와져서 생기는 문제였습니다.

    min.js 파일을 모두 지우고 해결되었습니다.
  • profile
    감사합니다.
  • ?
    감사합니다.