[네이버 지도 javascript map]Jdom을 이용한 스프링프레임워크 환경에서 xml 파싱하기

1. 네이버에서 제공하는 지도를 사용하기 위해서는 네이버 개발자 센터에서 키를 발급받아야한다.(http://developer.naver.com)

들어가서 키 발급/관리 메뉴에서 지도 api키를 발급한다. 테스트할 서버의 url이나 로컬url(포트포함)을 써주고 키발급을 하면된다.

 

 

2. 지도를 보기 위해서 기본 골격을 jsp페이지에 넣어준다.(여러가지 기능을 테스트 해보고 싶으면 네이버 개발자 api참고)

- 자바스크립트코드

Colored By Color Scripter™

1	<script src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=발급받은키"></script>

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10

window.onload = function(){                  new nhn.api.map.Map('map',{             point : mapPoint,              zoom:10,             mapMode:1         });                };

- jsp코드

Colored By Color Scripter™

1	<div id="map" style="width:700px; height:450px; display:inline; float:left; position: relative;" ></div>

 

위 처럼 하면 기본적인 지도는 보일 것이다.

 

 

다음에는 검색에 따른 지역의 지도를 보여주는 기능을 하도록 해보았다.

 jsp페이지에서 ajax로 처리해서 리턴받은 x,y좌표에 기초하여 페이지를 다시 리프레쉬 한다.

 네이버 api를 보면

http://openapi.map.naver.com/api/geocode.php?encording=utf-8&key=8d9cc4add0349bc9cf4f747fd84fc8b1&query=전라북도익산시

이 url을 요청하면 xml문서 웹페이지가 나타나게 된다. 여기에는 지역의 좌표값도 들어있다.

 

내가 코딩한 방식은

jsp에서 ajax요청 - java서버단에서 jdom라이브러리를 이용한 xml파싱하여 좌표 값 가져옴 - jsp리프레쉬 해당 좌표지도를 보여줌

 

아래는 jdom을 이용해서 x,y좌표값을 가져오는 코드이다.

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

public ModelAndView naverSearch(HttpServletRequest req) throws UnsupportedEncodingException{         String result = "";         String url = req.getParameter("url");         String name = req.getParameter("name");         name = URLDecoder.decode(name, "UTF-8");         url = url+name.trim();         InputStream is = null;         Element xPoint = null;         Element yPoint = null;         try {             is = new URL(url).openStream();         } catch (MalformedURLException e) {             e.printStackTrace();         } catch (IOException e) {             e.printStackTrace();         }                  try{             SAXBuilder builder = new SAXBuilder();             Document doc = builder.build(is);             Element rootElement = doc.getRootElement();             Namespace nameSpace = rootElement.getNamespace();                          List eItems = rootElement.getChildren();                          Iterator it = eItems.iterator();             while(it.hasNext()){                 Element eItem = (Element)it.next();                 List list = eItem.getChildren();                   if(eItem.getName().equals("item")){                     Element point = eItem.getChild("point", nameSpace);                     xPoint = point.getChild("x", nameSpace);                     yPoint = point.getChild("y", nameSpace);                     //break;                 }             }                      }catch(JDOMException e){             e.printStackTrace();         }catch(IOException e){             e.printStackTrace();         }                  ModelAndView mav = new ModelAndView();         mav.setViewName("jsonView");         result = (xPoint == null) ? "fail" : "success";         if("success".equals(result)){             mav.addObject("xPoint", xPoint.getText());             mav.addObject("yPoint", yPoint.getText());         }         mav.addObject("result",result);         return mav;     }