안녕하세요.
다름이 아니라 스프라이트 이미지를 통해 마커를 띄우는 중인데요.
여러개 마커 이벤트 등록하기 2 예제를 활용하여 개발중인데 https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markers_sprites2.png 스프라이트 이미지는 마커가 a,b,c 3개뿐인데 제가 작업중인 프로젝트는 a,b,c이후의 마커를 표시하고 싶습니다.
그래서 찾아보니 일단 15개정도까지 나와있는
http://t1.daumcdn.net/localimg/localimages/07/2012/img/marker_normal.png의 스프라이트 이미지나
https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png의 스프라이트 이미지를 사용하려고 하는데 마커 URl의 png가 통째로 나오더라구요…
검색을 해보니
for (var i = 0, len = positions.length; i < len; i++) {
var gapX = (MARKER_WIDTH + SPRITE_GAP),
originY = (MARKER_HEIGHT + SPRITE_GAP) * i,
overOriginY = (OVER_MARKER_HEIGHT + SPRITE_GAP) * i,
normalOrigin = new kakao.maps.Point(0, originY),
clickOrigin = new kakao.maps.Point(gapX, originY),
overOrigin = new kakao.maps.Point(gapX * 2, overOriginY);
해당 포문에서 스프라이트 위치값을 조정해야 한다고 하시더라구요…
var MARKER_WIDTH = 33, // 기본, 클릭 마커의 너비
MARKER_HEIGHT = 36, // 기본, 클릭 마커의 높이
OFFSET_X = 12, // 기본, 클릭 마커의 기준 X좌표
OFFSET_Y = MARKER_HEIGHT, // 기본, 클릭 마커의 기준 Y좌표
OVER_MARKER_WIDTH = 40, // 오버 마커의 너비
OVER_MARKER_HEIGHT = 42, // 오버 마커의 높이
OVER_OFFSET_X = 13, // 오버 마커의 기준 X좌표
OVER_OFFSET_Y = OVER_MARKER_HEIGHT, // 오버 마커의 기준 Y좌표
SPRITE_MARKER_URL = 'http://t1.daumcdn.net/localimg/localimages/07/2012/img/marker_normal.png', // 스프라이트 마커 이미지 URL
SPRITE_WIDTH = 126, // 스프라이트 이미지 너비
SPRITE_HEIGHT = 146, // 스프라이트 이미지 높이
SPRITE_GAP = 10; // 스프라이트 이미지에서 마커간 간격
var markerSize = new kakao.maps.Size(MARKER_WIDTH, MARKER_HEIGHT), // 기본, 클릭 마커의 크기
markerOffset = new kakao.maps.Point(OFFSET_X, OFFSET_Y), // 기본, 클릭 마커의 기준좌표
overMarkerSize = new kakao.maps.Size(OVER_MARKER_WIDTH, OVER_MARKER_HEIGHT), // 오버 마커의 크기
overMarkerOffset = new kakao.maps.Point(OVER_OFFSET_X, OVER_OFFSET_Y), // 오버 마커의 기준 좌표
spriteImageSize = new kakao.maps.Size(SPRITE_WIDTH, SPRITE_HEIGHT); // 스프라이트 이미지의 크기
변수들의 값을 바꾸지 않고 포문의 값을 적절히 바꿔줘야 하는건지
변수들의 값도 제가 원하는 스프라이트 이미지 위치에 맞게 조정을 해야 하는건지
감이 안와서 질문드립니다… 어떤식으로 풀어나가야 할지 조언좀 주시면 감사하겠습니다.
