Q&A
- HTML/SCRIPT Q&A
| 네이버 지도 API 비동기 방식 관련 질문사항(ajax) | |||||
| 글쓴이 |   artPhoto |
날 짜 | 12-06-01 14:12 | 조 회 | 483 |
|---|---|---|---|---|---|
| 간편URL |
http://phpschool.com/link/qna_html/210666
|
답변채택율 | 100 % | ||
|
안녕하세요! 초보 개발자입니다.
지금 네이버지도를 가지고 여러가지 작업을 하고 있는데요 그중에서 ajax를 적용하는 작업을 하고있습니다. 그런데 작업중 궁금한 사항이 있어 이렇게 글을 남깁니다. 꼭좀 도와주시기 바랍니다. 간단히 소스내용을 보여드리겠습니다. ====== 소스내용 ====== <script type="text/javascript" src="</script">http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버고유키"></script> <div id='testMap' style='position:absolute;width:100%;height:100%;top:0;left:0px;visibility:visible;z-index:0;'></div> <script type="text/javascript"> var oPoint = new nhn.api.map.TM128(<?=NAVER_CENTER_X?>, <?=NAVER_CENTER_Y?>); nhn.api.map.setDefaultPoint('TM128'); oMap = new nhn.api.map.Map('testMap' ,{ point : oPoint, zoom : 11, enableWheelZoom : true, enableDragPan : true, enableDblClickZoom : false, mapMode : 2, activateTrafficMap : false, activateBicycleMap : false, minMaxLevel : [ 1, 14 ] //,size : new nhn.api.map.Size(screen_w-210,screen_h-300) }); var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언 mapZoom.setPosition({left:20, bottom:20}); // - 줌 컨트롤 위치 지정. oMap.addControl(mapZoom); // - 줌 컨트롤 추가. mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언 mapTypeChangeButton.setPosition({left:50, bottom:20}); // - 지도 타입 버튼 위치 지정 oMap.addControl(mapTypeChangeButton); var oInfoWnd = new nhn.api.map.InfoWindow(); // - info window 생성 oInfoWnd.setVisible(false); // - infowindow 표시 여부 지정. oMap.addOverlay(oInfoWnd); // - 지도에 추가. <? for ($i = 0; $i < 5; $i++) { ?> var oSize = new nhn.api.map.Size("<?=$out[0][ICON_W][$i]?>", "<?=$out[0][ICON_H][$i]?>"); //마커크기 var oPointIcon = new nhn.api.map.TM128(<?=$out[0][RTU_REAL_X][$i]?>, <?=$out[0][RTU_REAL_Y][$i]?>); var oIcon = new nhn.api.map.Icon("<?=ICON_IMG_DIR?><?=$out[0][ICON_NAME][$i]?>", oSize); var oMarker1 = new nhn.api.map.Marker(oIcon, { title : "<?=$out[0][RTU_NAME][$i]?>" }); //마커 생성 oMarker1.setPoint(oPointIcon); //마커 표시할 좌표 선택 oMap.addOverlay(oMarker1); //마커를 지도위에 표현 oMarker1.setZIndex("<?=$out[0][RTU_ID][$i]?>"); var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언. oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨. oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기 <? } ?> </script> ====== 소스내용 ====== 위의 내용은 다 아시겠지만 기본 지도를 나타내는 소스입니다. 이 부분에서 제가 안되는 부분은 중간부분 for 안의 내용 var oIcon = new nhn.api.map.Icon("<?=ICON_IMG_DIR?><?=$out[0][ICON_NAME][$i]?>", oSize); 이부분인데요. 이부분은 해당 위치에 이미지를 생성 부분입니다. 이 부분이 ajax 비동기 방식으로 <?=$out[0][ICON_NAME][$i]?> 값이 변경이 되게 됩니다. 예로 처음에 a.gif 로 마커이미지가 생성이 되었다면 어느정도 일정시간에 DB가 변화가 생기면 ajax에서 b.gif로 변경이 됩니다. alert(<?=$out[0][ICON_NAME][$i]?>) 이걸로 확인을 하면 처음에 a.gif로 값이 들어오다가 일정시간 후엔 b.gif로 값이 변화가 되는걸 확인할수 있습니다. 하지만 화면상 지도부분에 아이콘 이미지는 처음 a.gif의 이미지만 그대로 출력이 되고 변경된 b.gif로는 변경되질 않습니다. 여러가지 체크를 해보고 있지만 어떤부분이 어떻게 잘못되었는지를 잘 모르겠습니다. 고수님께 도움을 요청합니다. 어떻게 화면을 변화시켜야 할까요!! ㅠㅠ 화면 깜빡임없이 처리하려니 고생이 이만저만이 아님니다. 꼭 도와주시기 바랍니다. ㅠㅠ |
|||||
전체댓글수 4
-
다크엔잴 12-06-01 14:54
소스보기
-
var oIcon = new nhn.api.map.Icon("<?=ICON_IMG_DIR?><?=$out[0][ICON_NAME][$i]?>", oSize);
위 부분은 페이지 로딩시 var oIcon = new nhn.api.map.Icon("경로값/a.gif", oSize); 로 해석돼서 값이 고정됩니다.
그러니 아무리 ajax로 변수를 변경해도 바뀌질 않죠.
ajax로 값을 변경시 바뀐 값을 변수에 할당해주고, new nhn.api.map.Icon(변수, oSize); 로 호출하게 변경하세요. -
artPhoto 12-06-01 15:15
소스보기
-
답변 감사드립니다.
지금 말씀하신사항을 보면 값을 a.gif로 고정시킨다고 하셨는데요!
고정이 아니고 DB에서 값을 가져와서 그 해당값을 지정해 줌니다.
$out[0][ICON_NAME] 이부분이 변수가 되고 for 문으로 변수값을 가져오는데요
이 부분 이렇게 하는게 아닌가요? 말씀하신데로 변수로 할당해주는게 이렇게 하는게 아닌가요?
$out[0][ICON_NAME] 으로 해도 말씀하신 사항대로 고정이 되는건가요?
제가 많이 부족해서..... ㅠㅠ 번거롭지만 좀더 상세히 답 부탁드리겠습니다. 죄송합니다. ㅠㅠ -
다크엔잴 12-06-01 15:32
소스보기
-
일단 서버단과 클라이언트단의 구분을 명확히 하셔야겠네요.
서버단 (asp,php,jsp 등등)의 내용은 페이지가 로딩될때 서버에서 실행되고 그 결과값만이 클라이언트단(html,css,자바스크립) 으로 넘어오기때문에 본문의 for문 안에 스크립트에 쓰인 서버단 변수는 결과적으로 변수의 값이 문자열로 변환돼서 실행되는거나 마찬가지 입니다.
그리고 ajax로 <?=$out[0][ICON_NAME][$i]?> 값을 변경한다 하셨는데, 페이지 새로고침 없이 클라이언트단에선 서버단의 함수나 변수등을 접근해서 실행하거나 변경할 수 없습니다. -
artPhoto 12-06-01 16:13
소스보기
-
아~ 무슨말씀인지는 알겠는데! 어떻게 해야할지 깜깜하네여! ㅠㅠ
열심히 한번 이것저것 해보겠습니다. 정말 감사드립니다. ^^;;; ㅠㅠ
-
게시물 64,659건
12345678910
