`var startX, startY, startOverlayPoint;
function MapWalker(position){
//커스텀 오버레이에 사용할 map walker 엘리먼트
var content = document.createElement(‘div’);
var figure = document.createElement(‘div’);
var angleBack = document.createElement(‘div’);
//map walker를 구성하는 각 노드들의 class명을 지정 - style셋팅을 위해 필요
content.className = ‘MapWalker’;
figure.className = ‘figure’;
angleBack.className = ‘angleBack’;
content.appendChild(angleBack);
content.appendChild(figure);
//커스텀 오버레이 객체를 사용하여, map walker 아이콘을 생성
var walker = new kakao.maps.CustomOverlay({
position: position,
content: content,
yAnchor: 1
});
this.walker = walker;
this.content = content;
// 커스텀 오버레이에 mousedown, mouseup 이벤트를 등록합니다
addEventHandle(this.content, 'mousedown', onMouseDown);
addEventHandle(this.content, 'mouseup', onMouseUp);
// 커스텀 오버레이에 touchstart, touchend 이벤트를 등록합니다
addEventHandle(this.content, 'touchstart', onMouseDown);
addEventHandle(this.content, 'touchend', onMouseUp);
}
function onMouseDown(e) {
// 커스텀 오버레이를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var proj = map.getProjection(),
overlayPos = mapWalker.getPosition(); // 커스텀 오버레이의 현재 위치를 가져옵니다
// 커스텀오버레이에서 마우스 관련 이벤트가 발생해도 지도가 움직이지 않도록 합니다
kakao.maps.event.preventMap();
if(e.type=='mousedown')
{ startX = e.clientX;
startY = e.clientY;
}
else if (e.type=='touchstart') {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}
// mousedown됐을 때의 커스텀 오버레이의 좌표를
// 지도 컨테이너내 픽셀 좌표로 변환합니다
startOverlayPoint = proj.containerPointFromCoords(overlayPos);
// document에 mousemove 이벤트를 등록합니다
addEventHandle(document, 'mousemove', onMouseMove);
addEventHandle(document, 'touchmove', onMouseMove);
}`
전체 코드는 아니고 마커 이벤트 중 onMouseDown 인데
function onMouseDown(e) {
여기에서
var proj = map.getProjection(),
overlayPos = mapWalker.getPosition();
여기서 부터 문제가 생기는거 같습니다
alert로 바로 위에서
map.getProjection()
출력 하면
[object Object]가 출력 이 되고
mapWalker.getPosition()
를 출력 해보면
아예 무반응이 되어 버립니다
그래서 맵이 생성 되고 맵에 MapWalker이 생성 되고
mapWalker.setPosition(position);
이 될때
바로 alert(mapWalker.getPosition());
을 해봐도 전혀 무반응 입니다
초보가 카카오 맵에 흥미가 있어서 api 제작을 해보려니 여기서 부터 막히네요
전체 코드
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
동동이를 이용하여 로드뷰와 지도 연동하기
.map_wrap {overflow:hidden;height:330px}
/* 지도위에 로드뷰의 위치와 각도를 표시하기 위한 map walker 아이콘의 스타일 */
.MapWalker {position:absolute;margin:-26px 0 0 -51px}
.MapWalker .figure {position:absolute;width:25px;left:38px;top:-2px;
height:39px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -298px -114px no-repeat}
.MapWalker .angleBack {width:102px;height:52px;background: url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -834px -2px no-repeat;}
.MapWalker.m0 .figure {background-position: -298px -114px;}
.MapWalker.m1 .figure {background-position: -335px -114px;}
.MapWalker.m2 .figure {background-position: -372px -114px;}
.MapWalker.m3 .figure {background-position: -409px -114px;}
.MapWalker.m4 .figure {background-position: -446px -114px;}
.MapWalker.m5 .figure {background-position: -483px -114px;}
.MapWalker.m6 .figure {background-position: -520px -114px;}
.MapWalker.m7 .figure {background-position: -557px -114px;}
.MapWalker.m8 .figure {background-position: -2px -114px;}
.MapWalker.m9 .figure {background-position: -39px -114px;}
.MapWalker.m10 .figure {background-position: -76px -114px;}
.MapWalker.m11 .figure {background-position: -113px -114px;}
.MapWalker.m12 .figure {background-position: -150px -114px;}
.MapWalker.m13 .figure {background-position: -187px -114px;}
.MapWalker.m14 .figure {background-position: -224px -114px;}
.MapWalker.m15 .figure {background-position: -261px -114px;}
.MapWalker.m0 .angleBack {background-position: -834px -2px;}
.MapWalker.m1 .angleBack {background-position: -938px -2px;}
.MapWalker.m2 .angleBack {background-position: -1042px -2px;}
.MapWalker.m3 .angleBack {background-position: -1146px -2px;}
.MapWalker.m4 .angleBack {background-position: -1250px -2px;}
.MapWalker.m5 .angleBack {background-position: -1354px -2px;}
.MapWalker.m6 .angleBack {background-position: -1458px -2px;}
.MapWalker.m7 .angleBack {background-position: -1562px -2px;}
.MapWalker.m8 .angleBack {background-position: -2px -2px;}
.MapWalker.m9 .angleBack {background-position: -106px -2px;}
.MapWalker.m10 .angleBack {background-position: -210px -2px;}
.MapWalker.m11 .angleBack {background-position: -314px -2px;}
.MapWalker.m12 .angleBack {background-position: -418px -2px;}
.MapWalker.m13 .angleBack {background-position: -522px -2px;}
.MapWalker.m14 .angleBack {background-position: -626px -2px;}
.MapWalker.m15 .angleBack {background-position: -730px -2px;}
.
