지도/로컬 API에 대한 문의게시판입니다.
마커이미지 가운데쯤에 1,2,3,4… 이렇게 텍스트를 번호?를 넣고 싶습니다.
마커 만들때 text: ‘1’ 이런 옵션?을 줘도 안되고 어떤 방법이 있을까요?
아니면 마커 이미지를 자체 제작 해야하나요??ㅠ
원하는대로 모두 입력하기 위해서는 별도의 마커를 제작하셔야 하고,
15 까지 표기된 마커는 아래 예제를 보시면 도움이 될거예요
감사합니다!^^ 도움주신 페이지 참고해서 이미지 제작해서 30개정도로 표시 하였습니다.
그런데 한가지 질문좀 드릴게요 ㅠ
마커 표시는 잘 되었는데, 마우스 휠로 줌인, 아웃하면 마커가 제위치에 있지않고 움직이네요 ㅠ
페이지참고해서 비슷하게 만들었는데, 왜 제 위치로 가지않고 움직일까요?ㅠ
그런 경우라면… 아마도 offset 값을 잘 조정해보셔야 할 거예요
아 그 offset 은 이미지안의 offset 인거 같습니다 ㅠ
제말은… 줌 인 하기 전에는
이렇게 되는데
줌 아웃 하면
이런식으로 벗어나게 되는거 말입니다…
예제 사이트 보면 따로 마커만 지정해주면 줌따라 움직이는거 같은데 말이죠 ㅠ
어떻게 하면 줌에 따라서 움직이나요?
마커 이미지의 offset 문제가 맞는 것 같습니다.
마커의 선언과 옵션이 어떻게 되어 있는지 코드를 알려주세요.
그 전에 해당 이미지 마커 대신 기본 마커를 찍어보시고, 위치를 제대로 잡는지 확인해 보세요.
기존 이미지를 사용 하여도 동일하게 안따라 갑니다 ㅠ 기존 이미지사용 코드 입니다.
function addMarker(position, idx, type) {
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png'; // 마커 이미지 url, 스프라이트 이미지를 씁니다
//var imageSize = new kakao.maps.Size(36, 32); // 마커 이미지의 크기
var imageSize = new kakao.maps.Size(36, 37); // 예제 사이트 마커 이미지의 크기
var imgOptions = {
spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
//spriteSize : new kakao.maps.Size(25, 960), // 스프라이트 이미지의 크기
//spriteOrigin : new kakao.maps.Point(0, (idx*32)), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
};
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions);
marker = new kakao.maps.Marker({
position: position, // 마커의 위치
image: markerImage
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
return marker;
}
줌 인
줌 아웃
기존 이미지도 동일한 현상이면… 어떤 원인이 있을까요? scale 변경에 따른 콜백 이런거 있을까요?
한 가지 가능성을 제시해 드리자면,
img 태그에 일괄적으로 페이지 전체에 적용하는 CSS가 적용되어있는 경우 입니다.
이것을 확인해주세요.
넵, 우선 감사합니당.
그리고 CSS확인 해본결과 따로 처리는 안되어있습니다.
한가지 차이점은 카카오맵 api 를 이용해서 주변검색을 안하고,
공공데이터 포털 api를 이용해서 주변 정보좌표를 가져오는 차이점이 있습니다.
차이점은 카카오검색잉 아닌 공공데이터 포털 api검색인데… 이렇게 가져온 좌표로 마커를 생성할 경우 이런 경우가 생길 수 있을까요?
그것과는 상관없을 겁니다.
어짜피 좌표는 하나일 거니까요.
그럼 다른 가능성을 말씀드릴게요.
지도의 동작도 맞고 좌표도 저 위치가 맞는 경우입니다.
질문자 분께서 마커가 광안대교 위에 위치해야 한다고 믿고 있기 때문에 마커의 움직임이 이상해 보이는,
일종의 착시일 수 있습니다.
해당 위치를 추출하여, 다른 지도나 위경도 확인 프로그램으로 확인해 보세요.
제가 확인한 바로는 제대로 위치를 잡은 것 같습니다.
테스트 좌표를 다리 옆쪽에 찍은 것입니다.
최대한 비슷한 위치에 동일한 축소 줌레벨:
같은 위치의 확대 줌레벨:
두 스샷은 레벨만 다르고 같은 좌표입니다. 참고 바랄게요.
헉…맞네요… 감사드립니다…ㅠ