Annotating Images With Custom Markers - jQuery KBmapMarkers happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 지도 > Annotating Images With Custom Markers - jQuery KBmapMarkers 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

Annotating Images With Custom Markers - jQuery KBmapMarkers

해피팀

네티즌

소스분류

지도

다운로드 횟수

68 회

간단설명

이미지로 만든 지도 위에 마크를 표시하고, 마크를 클릭하면 정보를 보여주는 레이어가 뜨는 예제입니다.

평가하기

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

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

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

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

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

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

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

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

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

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