$('#searchBtn').click(function() {
$.getJSON('subway_around.json', function(data) { //검색클릭시 테이블표시
$('#mapBody').html("");
$.each(data, function(i, value) {
if (value.station_nm == $('#searchBar').val()) {
$('#busNm').val(value.stnnm); //버스정류장 이름
$('#busX').val(value.tmx); //버스정류장 x좌표
$('#busY').val(value.tmy); //버스정류장 y좌표
$('#mapTable').css("visibility", "visible"); //hidden해둔 table을 visible해줌
$('#mapBody').append(
"<tr><td>" + value.line_num + "</td><td>"
+ value.station_nm + "</td><td>"
+ value.stationid + "</td><td>"
+ value.stnnm + "</td></tr>");
}
});
});
setTimeout(function() { //딜레이를 줘서 다른 fuction이 끝나면 실행
$.ajax({ //검색클릭시 지도표시
type : 'post',
url : 'map.jsp',
dataType : 'text',
success : function(data) {
$('#mapDiv').html(data);//map.jsp있는 글을 text로 가져오면 그것을 mapDiv에 뿌려줌
}
});
}, 10);
});
/* ------------------구분선--------------------- */
var geocoder = new daum.maps.services.Geocoder(), // 좌표계 변환 객체를 생성합니다
wtmX = $('#busX').val(), // 변환할 WTM X 좌표 입니다
wtmY = $('#busY').val(); // 변환할 WTM Y 좌표 입니다
// WTM 좌표를 WGS84 좌표계의 좌표로 변환합니다
geocoder.transCoord(wtmX, wtmY, transCoordCB, {
input_coord : daum.maps.services.Coords.WTM, // 변환을 위해 입력한 좌표계 입니다
output_coord : daum.maps.services.Coords.WGS84
// 변환 결과로 받을 좌표계 입니다
});
// 좌표 변환 결과를 받아서 처리할 콜백함수
function transCoordCB(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
//주변정류장 마커를 표시할 위치와 title 객체 배열
var positions = [ {
title : $('#busNm').val(),
latlng : new daum.maps.LatLng(result[0].y, result[0].x)
// 주변정류장마커를 표시할 위치입니다
} ];
}
//주변정류장 마커 이미지의 이미지 주소
var imageSrc = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i++) {
//주변정류장 마커 이미지의 이미지 크기 입니다
var imageSize = new daum.maps.Size(24, 35);
//주변정류장 마커 이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
//주변정류장 마커를 생성합니다
var busMarker = new daum.maps.Marker({
map : map, // 마커를 표시할 지도
position : positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage
// 마커 이미지
});
}
}
지금은 hidden으로 만들어진 input에 넣어 그 값을 wtmX,Y에 넣어주고 그값을 이용하여 마커를 찍고 있습니다. 그래서 .each를 돌려서 뽑아낸 마지막 값만 마커가 찍히고 있는데 여러개 마커를 찍고 싶은데 좌표계 변환후에 다시 마커를 생성하려고하니까 너무어렵네요…
제 생각엔 지금 현재는 .getJSON을 따로 빼놓았는데 이 부분을 좌표계 변환하는 부분이랑 합쳐줘야할것같은데 어렵네요…어떻게해야될지 방법좀 부탁드립니다.