<!-- ** 도움말 ** // 키등록 - http://dev.naver.com/openapi/register 에서 지도 API 도메인( 예: bluehouse.go.kr ) 등록 // HEAD 또는 BODY내 API스트립트 불러오기, key = 등록된키 // <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=9804a58f0b862168482ac84c87b4522a"></script> // BODY내 이 태그안에 지도 출력, geo_layer_id 와 일치 // <div id="mapApi01" style="border:1px solid #000;"></div> // 지도 기본 출력(확대축소) 레벨, 일반적으로 10 // var defaultLevel = 10; // 출력될 레이어 ID // var geo_layer_id = 'mapApi01'; // http://map.naver.com 검색 - 왼쪽 지도검색결과 - 목표선택 - 정보공유 URL복사 - 붙여넣기하면 // http://map.naver.com/?dlevel=12&enc=b64& lat=37.5866715 & lng=126.9739723 &searchCoord=126.9766096%3B37.5862812&query=&menu=location&tab=1&mapMode=0 // 위 주소에서 x = lng값좌표 , y = lat값좌표 이므로 입력해 줌 // var geo_pos_lat = 35.8096423; var geo_pos_lng = 127.0922915; // 출력되는 지도 크기 // var geo_size_width = 860; var geo_size_height = 480; // 출력될 마커 텍스트, 표시하지 않으려면 비워둠 // var geo_maker_string = '서울특별시 종로구 세종로 1'; // 출력될 정보 HTML텍스트, 표시하지 않으려면 비워둠 // var geo_info_string = '<span style="font-size:14px;color:#00f;">청 와 대</span><br />서울특별시 종로구 세종로 1<br />02-783-8200'; // // 마커가 여러개 찍히게 하고 싶을때는 아래 부분을 추가하고 배열 순서대로 입력 // 정보는 여러개 표시되지 않음 // var geo_pos_lat_other = [ 37.5866715, 37.5875307 ]; var geo_pos_lng_other = [ 126.9739723, 126.972999 ]; var geo_maker_string_other = [ '경복고등학교', '경기상업고등학교' ]; var geo_info_string_other = [ '<span style="font-size:14px;color:#00f;">경복고등학교</span>', '<span style="font-size:14px;color:#00f;">경기상업고등학교</span>' ]; // 표시안할때 var geo_pos_lat_other = []; var geo_pos_lng_other = []; var geo_maker_string_other = []; var geo_info_string_other = []; ** API 도움말 ** // 지도에 다른 버튼항목 표시하고자 할때 아래 부분을 script 부분 아래쪽 { 추가 옵션 추가 } 에 추가 // // 테마맵(주제별지도) 버튼 - 자전거, 교통 등 var oThemeMapBtn = new nhn.api.map.ThemeMapBtn(); oThemeMapBtn.setPosition({ bottom : 10, right : 10 }); oMap.addControl(oThemeMapBtn); // 자전거 범례 var oBicycleGuide = new nhn.api.map.BicycleGuide(); oBicycleGuide.setPosition({ top : 10, right : 10 }); oMap.addControl(oBicycleGuide); // 교통 범례 // var oTrafficGuide = new nhn.api.map.TrafficGuide(); oTrafficGuide.setPosition({ bottom : 30, left : 10 }); oMap.addControl(oTrafficGuide); // 실시간 교통지도 버튼 var trafficButton = new nhn.api.map.TrafficMapBtn(); trafficButton.setPosition({ bottom : 10, right : 150 }); oMap.addControl(trafficButton); // ============================================================== (기타 script 최하단에 추가 옵션 - 거의 사용안함) var oPolyline = new nhn.api.map.Polyline([], { strokeColor : '#f00', // - 선의 색깔 strokeWidth : 5, // - 선의 두께 strokeOpacity : 0.5 // - 선의 투명도 }); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음. oMap.addOverlay(oPolyline); // - 지도에 선을 추가함. oMap.attach('mouseenter', function(oCustomEvent) { var oTarget = oCustomEvent.target; // 마커위에 마우스 올라간거면 if (oTarget instanceof nhn.api.map.Marker) { var oMarker = oTarget; oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다. } }); oMap.attach('mouseleave', function(oCustomEvent) { var oTarget = oCustomEvent.target; // 마커위에서 마우스 나간거면 if (oTarget instanceof nhn.api.map.Marker) { oLabel.setVisible(false); } }); oMap.attach('click', function(oCustomEvent) { var oPoint = oCustomEvent.point; var oTarget = oCustomEvent.target; oInfoWnd.setVisible(false); 마커 클릭하면 if (oTarget instanceof nhn.api.map.Marker) { 겹침 마커 클릭한거면 if (oCustomEvent.clickCoveredMarker) { return; } - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다. - 단, DIV 의 position style 은 absolute 가 되면 안되며, - absolute 의 경우 autoPosition 이 동작하지 않습니다. oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+ '<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' + 'Hello World <br /> ' + oTarget.getPoint() +'<span></div>'); oInfoWnd.setPoint(oTarget.getPoint()); oInfoWnd.setPosition({right : 15, top : 30}); oInfoWnd.setVisible(true); oInfoWnd.autoPosition(); return; } var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() }); oMarker.setPoint(oPoint); oMap.addOverlay(oMarker); var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장. aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함. oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함 }); // ============================================================== (요기까지) ** 도움말 끝 ** -->