Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

클릭한 위치에 마커 표시하는 api 질문 입니다.

#1

안녕하세요.
T MAP API Guide 를 보고 구현 중인데요.
초기에 현위치 마커를 생성하고 클릭한 위치에 수정위치 마커를 표시하는 것을 구현하려하는데요
현위치 마커는 생성이 되는데 클릭시 onClick 함수안으로 이벤트가 들어오지도 않고 마커 표시가 되질않아서
원인이 뭔지 질문 드립니다.
onload시 initTmap() 함수를 실행합니다.

function initTmap(){
var h = $(window).height() - $(".contentArea").outerHeight();

	map = new Tmap.Map ({
		div : 'map_div',
		width : '100%',
		height : h+'px',
		httpsMode: true
	});
	
	map.events.register("click", map, onClick);//map 클릭 이벤트를 등록합니다.
	markerLayer = new Tmap.Layer.Markers();
	map.addLayer(markerLayer);
			
	var lonlat = new Tmap.LonLat(126.984895, 37.566369).transform("EPSG:4326", "EPSG:3857"); //테스트 좌표		
	var size = new Tmap.Size(28, 28);
	var offset = new Tmap.Pixel(-(size.w/2), -size.h); 
	var icon = new Tmap.Icon('/static/drivingHabit/images/map_now.png', size, offset);
			
	marker = new Tmap.Marker(lonlat, icon);
	markerLayer.addMarker(marker);		
	map.setCenter(new Tmap.LonLat(126.984895, 37.566369).transform("EPSG:4326", "EPSG:3857"), 15);
	map.removeZoomControl(); 
}

// 지도를 클릭했을때 발생하는 이벤트 함수입니다.
function onClick(e){
	markerLayer.removeMarker(marker); // 기존 마커 삭제
	var lonlat = map.getLonLatFromViewPortPx(e.xy).transform("EPSG:3857", "EPSG:4326");//클릭 부분의 ViewPortPx를 LonLat 좌표로 변환합니다.
	console.log(lonlat);
	var size = new Tmap.Size(44, 44);//아이콘 사이즈 설정
	var offset = new Tmap.Pixel(-(size.w/2), -size.h);//아이콘 중심점 설정
	var icon = new Tmap.Icon('/static/drivingHabit/images/map_modify_big.png', size, offset);//마커 아이콘 설정
	marker = new Tmap.Marker(lonlat.transform("EPSG:4326", "EPSG:3857"), icon);//마커 생성
	markerLayer.addMarker(marker);//마커 레이어에 마커 추가
}
0 Likes

#2

안녕하세요.
T map API 운영담당자 입니다.

보내주신 내용을 토대로 테스트 해본 결과 정상적으로 onClick 함수가 작동하고 마커가 생성되는 것을 확인하였습니다.

아래 링크는 클릭한 위치에 마커를 표시하는 예제입니다.

자세한 내용은 예제를 참고하신 다음 테스트를 진행 하시면 도움이 되실 겁니다. --------------- < 클릭한 위치에 마커 표시하기 > http://tmapapi.sktelecom.com/main.html#web/sample/webSample15 ---------------

동일한 현상이 반복되는 경우 에러의 내용과 함께 문의주시면 검토 후 다시 답변드리도록 하겠습니다.

감사합니다.

0 Likes