Development/JavaScript

sunyruru 2008. 1. 15. 16:41

reference.php

   1:  <html>

   2:  <head>

   3:  <script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>

4:

   5:  <style type="text/css">

   6:  #map{

   7:      height: 300px;

   8:      width: 640px;

   9:  }

  10:  </style>

11:

  12:  <script type="text/javascript">

  13:  <!--

14:

  15:  function StartYMap()

  16:  {

  17:      // 지도 오브젝트를 생성 합니다.

  18:      var map = new YMap(document.getElementById('map'));

19:

  20:      // 지도 유형 콘트롤을 추가합니다.

  21:      map.addTypeControl();

  22:      // 지도 확대/축소 콘트롤을 추가합니다.

  23:      map.addZoomLong();

  24:      // 지도 이동 콘트롤을 추가합니다.

  25:      map.addPanControl();

26:

  27:      // 지도보기 유형을 선택합니다.

  28:      // YAHOO_MAP_SAT: 위성지도

  29:      // YAHOO_MAP_HYB: 하이브리드 지도

  30:      // YAHOO_MAP_REG: 일반지도

  31:      map.setMapType(YAHOO_MAP_REG);

32:

33:

  34:      // 지명을 이용하여 지도의 표시 위치를 지정한다.

  35:      // 이때 한글은 encodeURIComponent를 이용하여 encode된 문자열을 전달해주어야 한다.

  36:      //    map.drawZoomAndCenter(encodeURIComponent("삼성동"),3);

37:

  38:      map.drawZoomAndCenter(encodeURIComponent("교보문고"),3);

  39:      var newMarker= new YMarker(encodeURIComponent("교보문고"));

  40:      newMarker.addAutoExpand("교보문고");

  41:      map.addOverlay(newMarker);

  42:  }

43:

44:

  45:  window.onload = StartYMap;

46:

  47:  //-->

  48:  </script>

49:

  50:  </head>

51:

  52:  <body>

  53:  <div id="map"></div>

  54:  </body>

  55:  </html>

Yahoo 지도 API를 이용해 회사 근처의 '교보문고' 를 축소 3단계로 검색하고, 지도에 마크를 표시하도록 처리해 본 소스입니다.

보다시피 내용이 어렵지 않고

메소드도 간결하여 자바스크립트로 지도를 가지고 하는 처리를 쉽게 작성할 수 있을 듯 하네요.

Version 3.7 야후! 지도 AJAX API – 클래스 참조문서http://kr.open.gugi.yahoo.com/document/reference.php