네이버 지도 api v3 사용하기

해야할 일 :

네이버 지도 api버전을 v2에서 v3로 변경

- 일반지도 / 위성지도 가 보여야 함

- 폴리라인사용

- 마커사용 (각 위치별 개별 마커 이미지 있음)

- 마커 클릭시 설명창이 보여야 함

- 지도 위치 검색 후 센터잡기

* 함수안에서 실행을 할 때는 callback을 추가해야 한다.

https://navermaps.github.io/maps.js/docs/tutorial-0-Getting-Started.html

https://navermaps.github.io/maps.js/docs/tutorial-4-Submodules.html

*  나는.. naver.maps. .. 네임스페이스? 이 부분이 함수 안에서 사용할 때 정의되지 않았다고 계속 그래서

혹시나 하고 N으로 변경했는데 인식이 됐다. 

- 다시보니.. 이렇게 쓰라고 만든거였네..

https://navermaps.github.io/maps.js/docs/tutorial-2-Abbreviation.html

---

1.지도가 보일 jsp

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=받은clientId&callback=init"></script>

<script type="text/javascript" src="nav.js"></script> 

<div class="course_map_include" id="map" style="width:100%;height:600px;">

<div class="buttons" style="position: absolute; top: 0px; left: 0px; z-index: 1000; padding: 5px;">

          <input class="control-btn" id="NORMAL" type="button" value="일반지도" style="margin: 0; color: #555; padding: 2px 6px; background: #fff; border: solid 1px #333; cursor: pointer; -webkit-border-radius: 5px; outline: 0 none; border-radius: 5px; box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.5) !important;">

 <input class="control-btn" id="TERRAIN" type="button" value="지형도">

<input class="control-btn" id="SATELLITE" type="button" value="위성지도">

<input class="control-btn " id="HYBRID" type="button" value="겹쳐보기">

        </div>

</div>

//지도 위에 버튼을 눌러야 하고 스크립트 추가가 필요하다. 그리고 나는..스타일도 긁어옴..

<script type="text/javascript">

  var btns = $(".buttons > input");

      btns.on("click", function(e) {

          e.preventDefault();

          var mapTypeId = this.id;

          if (map.getMapTypeId() !== N.MapTypeId[mapTypeId]) {

              map.setMapTypeId(N.MapTypeId[mapTypeId]); // 지도 유형 변경하기

              btns.removeClass("control-on");

              $(this).addClass("control-on");

          }

      });

</script>

2. nav.js

   function init() {

  map = new N.Map('map', {

      zoom: 9,

      maxZoom : 14,

      minZoom : 0

      });

}

...

//폴리라인

 var polyline1 = eval("["+content+"]");

 var point = new Array();

for (var i=0;i<polyline1.length;i++){

point[i] = new N.LatLng(polyline1[i][1], polyline1[i][0]);

      }

var polyline = new N.Polyline({

    path: point,    //point 배열로 만들어서 넣음

    strokeWeight: 5,

    strokeColor: cpl_color, // 상황에 따라서 DB에서 색을 가져와서 넣더라.(DB에 95,0,255,255 이런 식으로 저장해두고)

    strokeOpacity: 1

});

polyline.setMap(map); // 추가

//지도를 검색결과에 따라 이동시키기

...

point = new N.LatLng(pointY,pointX);

map.setCenter(point);

map.setZoom(9);

//마커추가하기

-- 반복문돌면서 위경도 찍음 시작--

var markerOptions = {

    position: point,

    icon: {

        url: "/images/"+icon,  //각 위치에 대해 필요한 이미지를 보여준다. icon은 DB에 저장되어 있거나 파일명만 있거나..

        size: new N.Size(30, 30),

        anchor: new N.Point(20, 20)

    }

};

var marker = new N.Marker(markerOptions);

marker.setMap(map); // 추가

-- 반복문돌면서 위경도 찍음 끝--

//설명창추가

var infoWindow = new N.InfoWindow({

 content: "<table style='background-color:white;'><tr><td>"+name+"</td></tr><tr><td><img src=주소/></td></tr></table>"  //이렇게 만들어서 쓸 수 있음

});

N.Event.addListener(marker, "click", function(e) {

 if (infoWindow.getMap()) {

    infoWindow.close();

else {

   infoWindow.open(map, marker);

 }

});

...