아래는 기존 예제의 원, 마커, 커스텀 오버레이를 생성한 코드로
레벨 변경을 해도 커스텀 오버레이 위치가 이동되지 않았습니다.
먼저 커스텀 오버레이 content에 설정된 HTML 문자열과 스타일도 확인이 필요해보여요.
기본 문자열로 생성해서 다시 한번 확인 부탁드립니다.
그리고 현상을 확인할 수 있는 HTML 문자열도 함께 첨부해주세요.
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var circle = new kakao.maps.Circle({
map: map,
center : new kakao.maps.LatLng(33.45063768751758, 126.57067227820814), // 원의 중심좌표 입니다
radius: 135.00000000052157, // 미터 단위의 원의 반지름입니다
strokeWeight: 2, // 선의 두께입니다
strokeColor: '#75B8FA', // 선의 색깔입니다
strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid', // 선의 스타일 입니다
fillColor: '#CFE7FF', // 채우기 색깔입니다
fillOpacity: 0.4 // 채우기 불투명도 입니다
});
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(33.45069174545018, 126.57066125640884),
image: markerImage // 마커이미지 설정
});
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: marker.getPosition(),
content: '<div style="padding-top:30px"><div>연산공원</div> <div>출근가능거리: 100m</div></div>',
xAnchor: 0.5,
yAnchor: 0.5
});
선생님의 자세한 답변 진심으로 감사합니다. 앞으로의 프로젝트도 HTML 노드를 직접 수정하는 방식으로 진행하도록 하겠습니다. 하지만 이제는 온클릭 이슈는 해결했는데 다른 곳을 줌했다가 다시 돌아오면 똑같이 위치가 바뀌게 되는 현상이 일어나게 됩니다… 한 번 확인 부탁드리겠습니다
아, 생각해보니 제가 레벨에 따라서 특정 엘리먼트를 display none 으로 해주었다가 display block 혹은 inline-block으로 설정해주었는데요. 혹시나 해서 이 코드를 빼보니 위치가 바뀌는 현상이 나타나지 않았습니다. 이것과 관련해서 제 스스로 만져봐야겠군요… 이 문제는 제가 해결하겠습니다!! 지금까지 친절한 답변에 감사드립니다.