Spring 개발 - BIS(Bus Information System) 만들기(3) - 다음 지도 API(클릭 이벤트)

본 내용은 혼자서 공부하기 위한 용도로 사용된 것으로 비효율적일 수 있으며 실용적이지 않을 수 있습니다.

---

다음 지도 API 기능을 적용시켜 볼 것이다. 적용할 기능으로는

지도 클릭 시 해당 위치에 아이콘으로 표시, 해당 위치의 경도, 위도 값 가져오기이다.

map.js에 해당 코드를 추가한다.

/webapp/js/daumAPI/map.js

function fn_clickSetting(){
	var clickMarker=null;
	//노선 마커와 위치 클릭 마커
	
	var clickIcon = new daum.maps.MarkerImage(
			"./image/location.png",
			new daum.maps.Size(32,32));
	
	//지도에 클릭 이벤트를 등록합니다
	// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
	daum.maps.event.addListener(map, 'click', function(mouseEvent) {        
	    
		if(clickMarker!=null){
			clickMarker.setMap(null);
		}
		
	    // 클릭한 위도, 경도 정보를 가져옵니다 
	    var latlng = mouseEvent.latLng;
	    
	    var resultDiv1 = document.getElementById('lat'); 
	    resultDiv1.value = Math.floor(latlng.getLat()*100000)/100000;
	    var resultDiv2 = document.getElementById('lng');
	    resultDiv2.value = Math.floor(latlng.getLng()*100000)/100000;
	    
	    clickMarker = new daum.maps.Marker({
	    	position: new daum.maps.LatLng(resultDiv1.value,resultDiv2.value),
	    	image:clickIcon,
	    	clickable:false
	    });
	    
	    
	    clickMarker.setMap(map);
	    
	});
}

//배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다.
function setMarkers(map){
	for(var i=0; i<markers.length;i++){
		markers[i].setMap(map);
	}
}

- 해당 코드는 위에서 말했던 클릭 시의 기능들을 위해 선언한 함수이다.

클릭 할 시 그에 대한 정보를 담을 마커 변수를 선언한다. 그 밑의 clickIcon 은 클릭 시 표시되는 아이콘 이미지에 대한 변수이다.다음API에서 제공하는 클릭 이벤트를 선언하고 지도로부터 위도, 경도를 변수에 불러와 <input type="text"> 태그의 id 값이 "lat,lng"였던 부분의 값을 채워주고, 클릭 마커 변수에 저장 한 뒤 지도에 해당 위치에 마커 변수를 매핑해주는 역할을 한다.

/WEB-INF/jsp/node_info.jsp

<script type="text/javascript">

		$("#node_find").addClass("selected");
		
		fn_clickSetting();
</script>

해당 코드에 fn_clickSetting() 이 부분을 함수를 호출한다.

 

지금까지 잘 따라왔다면 밑과 같은 화면을 볼 수 있을 것이다.

 

 

지도에서 가장 기본적인 기능은 완료하였고 이제는 해당 지역의 정류소 GPS 값, 정보 또는 버스 노선의 정보 등을 필요로 한다. 이 API 값을 받아오는 작업은 다음 포스팅에서 하겠다.