[해피CGI][cgimall] Annotating Images With Custom Markers - jQuery KBmapMarkers

다운로드 받은 파일의 압축을 해제하면 생기는
index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.

 

 

이미지 파일로 된 지도위에
위 그림과 같이 특정 위치에 마크를 표시해주고,
마크를 클릭하면 미리 준비해둔 제목, 내용 을
지도위에 보여주는 작은 레이어가 열리는 스크립트의 예제입니다.

index.html 파일의 소스코드를 열어서 보면

이미지로 제작된 지도를 
웹페이지에 표시하기 위해서 사용된 스크립트를 확인이 가능합니다.

 

 

별다른 기능은 없으며,
json 포맷의 데이터를 이용해서

 

 

지도 위의 마커의 X좌표, Y좌표, 아이콘,
클릭했을때 화면에 표시되는 레이어내의 제목, 내용 등의 문구를 지정할수 있겠습니다.

X,Y좌표만 살짝 변경을 해서 웹페이지를 새로고침 해보니

 

지도 위에 찍히던 마커가 이동을 하네요.


배경용 이미지가 꼭 지도가 아니더라도,
사용할 수 있을만한 곳이 있을듯 합니다.

출처는
https://www.jqueryscript.net/other/Annotate-Images-Markers-KBmapMarkers.html 입니다.