첫 지도 좌표 실행시 오차가 발생합니다. 원인이 무엇일까요?

다음 지도 api를 이용하여, 마커를 표시합니다.

그런데, 처음 실행했을때의 마커가 오른쪽으로 조금 이동이 되어 있습니다.

그리고, 더 신기한것은, 지도를 잠깐 이동시키면, 마커를 새로 그리는데,

해당위치에 잘 그려집니다.

소스 수정없이, 마커만 새로 그리는데, 정상적인 위치에 그려지는데

처음에는 왜 오른쪽으로 조금 이동된 위치에 마커가 그려질까요?

마커가 오른쪽으로 이동되어 있다는 말씀이
마커가 찍힌 위치가 다르다는 말씀인가요?
아니면 마커는 정상적으로 찍혀있는데 지도 중심이 이동되어 있어 맞지 않는다는 말씀인가요?

1110

마커 위치기 이동이 됩니다.

처음 지도를 실행했을때와 F5를 눌렀을때 마커 위치가 다르게 나오는 현상이 생겨요…ㅠㅠ

실제 마커의 position 값을 동일한 좌표를 입력하는데 그렇게 되는 것인가요?
marker.getPosition(); 등으로 실제 마커의 좌표를 한번 체크해보시겠어요?

아마도 이미지 로딩 시점의 문제 같은데
작성하신, 마커를 생성하는 코드를 첨부해 주세요. 확인해 보겠습니다.

image
image

imageimage

새로고침만 했어요 그래서 좌표값이 변경되거나 할 이유가 없어요
처음 접속할때만 이렇게 달라요, F5를 누르면 이동이 되고 그다음부터는 아무리 F5를 눌러도 같은 위치에 실행이되요…ㅠㅠ

마커 생성하는 소스 코드 입니다.

		onMapMarkDraw : function() {

			// 로딩 시작
			if($('.loading-shown').length == 1) { return; }
			$.maps.index.onLoading(true);

			if(typeof $.maps.index.overlayBox == 'object') {
				$.maps.index.overlayBox.setMap(null);
			}
			var sData = $.extend($.maps.index.sData, {
				clear	: true,
				page	: 1
			});
			$.maps.index.onMapMarkDrawStEvent.call(sData);

			// 초기화
			$.map($.maps.index.overlay, function(i) {
				i.setMap(null);
			});
			$.maps.index.overlay = {};

			// 첫번째 아규먼트(건물번호)
			var showGNo = arguments[0];
			if(showGNo == 'undefined' || showGNo == undefined) { showGNo = ''; }

			// 센터 기록
			var position		= $.maps.index.map.getCenter();
			$.maps.index.lat	= position.getLat();
			$.maps.index.lng	= position.getLng();

			// 지도 범위
			var bounds		= $.maps.index.map.getBounds();
			var latSt		= bounds.getSouthWest().getLat();
			var lngSt		= bounds.getSouthWest().getLng();
			var latEd		= bounds.getNorthEast().getLat();
			var lngEd		= bounds.getNorthEast().getLng();

			// 지도 확대 수준
			$.maps.index.level	= $.maps.index.map.getLevel();

			// 현재위치기록
			Cookies.set('mapPositionLat', $.maps.index.lat);
			Cookies.set('mapPositionLng', $.maps.index.lng);
			Cookies.set('mapLevel', $.maps.index.level);

			// 검색
			var data		= $.extend($.maps.index.sData, {
				latSt		: latSt,
				lngSt		: lngSt,
				latEd		: latEd,
				lngEd		: lngEd,
				level		: $.maps.index.level,
				gNo			: ''
			});

			$.ajax({
				url			: '/map/latLng',
				data		: data,
				type		: 'post',
				dataType	: 'json',
				success		: function(result) {

					if(result.success == false) {
						$.maps.index.onLoading(false);
						return;
					}

					var levelMax = 1;
					if(g.memLevel >= 9500) { levelMax = 1; }

					if($.maps.index.level <= levelMax) {

						// 그리기
						for(var i in result.data) {

							// 데이터 설정
							var data = result.data[i];

							// 좌표로 중복 체크
							var lat				= data.lat;
							var lng				= data.lng;

							// 확인매롤 개수
							var monCnt		= data.monCnt;
							var yearCnt		= data.yearCnt;
							var saleCnt		= data.saleCnt;
							monCnt			= Number(monCnt);
							yearCnt			= Number(yearCnt);
							saleCnt			= Number(saleCnt);
							realCnt			= monCnt + yearCnt + saleCnt;

							// 글자수
							var nameCnt		= $.eum.common.getByteLang(data.name);
							nameCntData		= {
								1		: '14px',
								2		: '14px',
								3		: '8px',
								4		: '8px',
								5		: '3px',
								6		: '3px',
								7		: '-2px',
								8		: '-2px',
								9		: '-8px',
								10		: '-8px',
								11		: '-12px',
								12		: '-12px',
								13		: '-18px',
								14		: '-18px',
								15		: '-22px',
								16		: '-22px',
								17		: '-24px',
								18		: '-24px'
							}
								
							// 이미지경로
							var markerSrc = 'https://banggrae.co.kr/theme/web/resource/images/default_marker.png';
							if(realCnt == 0) {
								markerSrc = 'https://banggrae.co.kr/theme/web/resource/images/default_marker_gray.png';									
							}

							// 빈방이면서 이미지가 있는 건물이면 
							var classMarker = '';
							if(g.memLevel >= 9500) {
								var roomEmpty	= data.roomEmpty;
								var imgIs		= data.imgIs;
								if(realCnt > 0 && roomEmpty == 'Y' && imgIs == 'N') {
									markerSrc = 'https://banggrae.co.kr/theme/web/resource/images/default_marker_red.png';									
								}

								// 찜한방
								if(data.zzimYN == 'Y') {
									markerSrc = 'https://banggrae.co.kr/theme/web/resource/images/default_marker_yellow.png';												
								}
							} else {
								// 일반회원
								markerSrc		= 'https://banggrae.co.kr/theme/mobile/resource/images/default_marker_2.png';
								classMarker		= ' marker2';
							}

							var modifyBtn	= '';
							var pointTitle	= '';
							if(g.memLevel >= 9500) {
								modifyBtn	= '<a href="javascript:void(0);" onclick="$.maps.index.onBuildOpen(' + data.gNo + ');"><span class="p_Way p_Way_d">수정</span></a>';

								pointTitle	= '<span style="position:absolute;color:#1b1b1b;background-color:#fff;padding:3px 3px 2px 3px;border-radius:5px;left:' + nameCntData[nameCnt] + ';top:4px;">' + data.name + '</span>';
							}

							// 자동열림
							var display = 'display:none;';
							if(showGNo != '' && data.gNo != '' && showGNo == data.gNo) {
								display = '';
							}

							// 추천방
							var recIcon = '';
							if(g.memLevel >= 9500 && data.recCnt > 0) {
								recIcon = '<img src="https://banggrae.co.kr/theme/web/resource/images/rec_marker_icon.png" style="position:absolute;top:-26px;left:15px;width:17px;z-index:100;">';
							}

							// 최소금액
							var priceMin = data.priceMin;

							// 최대금액
							var priceMax = data.priceMax;
							var priceCnt = $.eum.common.getByteLang(priceMax);

							var priceBoxDisplay = '';
							if(g.priceBoxShow == 'N') { priceBoxDisplay = 'display:none;'; }

							// 가격범위
							var priceBox = '';
							if(realCnt > 0) {
								if(priceMin == priceMax) {
									priceBox = '<span class="priceBox priceBox' + priceCnt + ' box' + (i%4) + '" style="' + priceBoxDisplay + 'padding-top:11px;padding-right:10px;"><b style="font-weight:800;font-size:12px;letter-spacing:1px;">' + priceMin + '만</b></span>';
								} else {
									priceBox = '<span class="priceBox priceBox' + priceCnt + ' box' + (i%4) + '" style="' + priceBoxDisplay + '"><b style="font-size:12px;font-weight:800;letter-spacing:1px;">' + priceMin + '만</b><span style="position:relative;display:block;font-size:10px;top:0px;letter-spacing:1px;">~' + priceMax + '만</span></span>';
								}
							}

							var content =	'' + 
											'<div class="spotHover' + classMarker + '">' +
											'	<span class="realCnt">' + realCnt + '</span>' + 
											'	<div class="bangInfoBox popInfo3" style="' + display + '">' + 
											'		<div class="bangcon">' + 
											'			<a href="javascript:void(0);" onclick="$.maps.index.onClose();" class="btnClose"><span>닫기</span></a>' + 
											'			<div class="imgBox left">' + 
											'				<a href="javascript:void(0);" onclick="$.maps.index.onGoodsClick(' + data.gNo + ', null);">' + 
											'					<img src="' + data.img + '" alt="방이미지">' + 
											'				</a>' + 
											'			</div>' + 
											'			<div class="infoBox right">' + 
											'				<dl>' + 
											'					<dd class="infoRow row1">' + 
											'						<a href="javascript:void(0);" onclick="$.maps.index.onGoodsNameClick(' + data.gNo + ', \'' + data.name + '\');"><span class="name">' + data.name + '</span></a>' + 
											'						' + modifyBtn + 
											'					</dd>' + 
											'					<dd class="infoRow row2"><span>' + data.text1 + '</span></dd>' + 
											'					<dd class="infoRow row3"><span>' + data.text2 + '</span></dd>' + 
											'					<dd class="infoRow row4">' + 
											'						<span>월세 : <a href="javascript:void(0);" onclick="$.maps.index.onGoodsClick(' + data.gNo + ', \'MON\');"><strong>' + data.monCnt  + '개</strong></a></span> / ' +
											'						<span>전세 : <a href="javascript:void(0);" onclick="$.maps.index.onGoodsClick(' + data.gNo + ', \'YEAR\');"><strong>' + data.yearCnt + '개</strong></a></span> / ' +
											'						<span>매매 : <a href="javascript:void(0);" onclick="$.maps.index.onGoodsClick(' + data.gNo + ', \'SALE\');"><strong>' + data.saleCnt + '개</strong></a></span>' +
											'					</dd>' + 
											'				</dl>' + 
											'			</div>' + 
											'			<div class="clr"></div>' + 
											'		</div>' + 
											'	</div>' + 
											'	<a href="javascript:void(0);" onclick="$.maps.index.onRoomInfoOpen(this, ' + i + ');" onmouseover="$.maps.index.onRoomInfoOver(this, ' + i + ');">' + priceBox + 
											'		<img src="' + markerSrc + '" class="markerImg">' + recIcon + 
											'	</a>' + pointTitle + 
											'</div>';

							var position = new daum.maps.LatLng(lat, lng); 

							$.maps.index.overlay[i] = new daum.maps.CustomOverlay({
								position	: position,
								content		: content
							});

							$.maps.index.overlay[i] = $.extend($.maps.index.overlay[i], {
								aaa	: 'bbb'
							});

							$.maps.index.overlay[i].setMap($.maps.index.map);

							// 자동열림
							$.maps.index.overlay[i].setZIndex(10);
							if(showGNo != '' && data.gNo != '' && showGNo == data.gNo) {
								$.maps.index.overlay[i].setZIndex(11);
							}

						}

					} else {

						// 그리기
						for(var i in result.data) {

							// 데이터 설정
							var data = result.data[i];

							// 좌표로 중복 체크
							var lat				= data.lat;
							var lng				= data.lng;

							// 문자열길이
							var cntLength		= data.cnt.toString().length;

							var content =	'' + 
											'<a href="javascript:void(0);" onclick="$.maps.index.onRoomListDraw(' + data.latSt + ', ' + data.latEd + ', ' + data.lngSt + ', ' + data.lngEd + ');">' + 
											'	<div class="mapsText mapsText_' + cntLength + '">' + data.cnt + '</div>' + 
											'</a>';

							var position = new daum.maps.LatLng(lat, lng); 

							$.maps.index.overlay[i] = new daum.maps.CustomOverlay({
								position	: position,
								content		: content,
							});

							$.maps.index.overlay[i] = $.extend($.maps.index.overlay[i], {
								aaa	: 'bbb'
							});

							$.maps.index.overlay[i].setMap($.maps.index.map);

						}
					}

					// 지역 추천방 변경
					$.maps.indexFooterLayer.onRecRoomDraw(1);
			

					// 로등마무리
					$.maps.index.onLoading(false);
					
				}

			});
		},

커스텀 오버레이 이므로
내부 컨텐츠의 레이아웃이 채 잡히지 않은 시점에 지도에 올리게 되면
위의 현상처럼 틀어지게 됩니다.

즉 이미지 로딩이 되지 않은 채로 지도 위에 올린 것이 원인이라 예상됩니다.

만약 이미지가 고정 크기라면
내부 컨텐츠의 인라인 스타일이나 CSS 클래스를 지정하여
미리 컨텐츠 엘리먼트의 width, height 를 명시해 주세요.
그러면 이미지가 로딩되지 않은 상태에서도 레이아웃이 잡힐 것이므로
초기 커스텀 오버레이가 뜨는 시점에도 정확하게 위치를 잡을 겁니다.

1개의 좋아요

답변 너무너무 감사합니다.
이미지 크기를 고정시켰더니 해결이 되었습니다.
마커 이미지 사이즈의width, height 를 적어줬더니 해결이 되었어요~~
답변 너무너무 감사합니다.^^

1개의 좋아요