2014년 3월 29일 토요일

Element.insertAdjacentHTML 사용법 

사용법


element.insertAdjacentHTML(position, text);





position의 위치




<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->











사용법 






html구성 


//<body>


// aaa






스크립트 실행


var eleBody = document.body;


eleBody.insertAdjacentHTML('beforeend','<div>b</div>');










결과 


//<body>


// aaa



//<div>b</div>


























작성자:



시간:





댓글 없음:
  









































          

        

          

        

2014년 3월 6일 목요일


          

        









네이버 open api 맵 적용작업 












1. 네이버에서 키 발급(https://developer.naver.com/openapi/register.nhn)



2. 해당소스에 <script type="text/javascript" src="https://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=키"></script> 임포트 시키고



function mapParse(areaid,Xlocation,Ylocation){

   var oPoint = new nhn.api.map.LatLng(Xlocation, Ylocation);

   var oPoint2 = new nhn.api.map.LatLng(Xlocation, Ylocation);

   nhn.api.map.setDefaultPoint('LatLng');

   oMap = new nhn.api.map.Map(areaid, {

      center : oPoint,

      level : 11, // - 초기 줌 레벨은 10이다.

      enableWheelZoom : true,

      enableDragPan : true,

      enableDblClickZoom : false,

      mapMode : 0,

      activateTrafficMap : false,

      activateBicycleMap : false,

      activateRealtyMap : true,

      minMaxLevel : [ 1, 14 ],

      size : new nhn.api.map.Size(700, 350)

   });



   var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언

   mapZoom.setPosition({left:10, bottom:40}); // - 줌 컨트롤 위치 지정.

   oMap.addControl(mapZoom); // - 줌 컨트롤 추가.

   

   var oSize = new nhn.api.map.Size(60, 60);

   var oOffset = new nhn.api.map.Size(60, 60);

   var oIcon = new nhn.api.map.Icon('', oSize, oOffset);



   // - Draggable Marker 의 경우 Icon 인자는 Sprite Icon이 된다.

   // - 따라서 Sprite Icon 을 사용하기 위해 기본적으로 사용되는 값을 지정한다.

   // - Sprite Icon 을 사용하기 위해서 상세한 내용은 레퍼런스 페이지의 nhn.api.map.SpriteIcon 객체를 참조하면 된다.

   var testdefaultSpriteIcon = {

     url:"",

     size:{width:60, height:60},

     spriteSize:{width:60, height:60},

     imgOrder:0,

     offset : {width: 60, height: 60}

   };

   // - 위에서 지정한 기본값을 이용해 실제로 SpriteIcon 을 생성한다.

   var testDupSpriteIcon_first = new nhn.api.map.SpriteIcon(testdefaultSpriteIcon.url, testdefaultSpriteIcon.size, testdefaultSpriteIcon.spriteSize, 0, testdefaultSpriteIcon.offset);



   var DraggableMarker = new nhn.api.map.DraggableMarker(testDupSpriteIcon_first , { 

    title : '',

    point : oPoint,

    zIndex : 1,

    smallSrc :  testDupSpriteIcon_first});  

   oMap.addOverlay(DraggableMarker);

   

   var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성.

   mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.

   oMap.addOverlay(mapInfoTestWindow); // - 지도에 info window를 추가한다. 

   

   oMap.attach('click', function(oCustomEvent) {

    var oPoint = oCustomEvent.point;

    var oTarget = oCustomEvent.target;

    mapInfoTestWindow.setVisible(false);

    // 마커를 클릭했을 때.

    if (oTarget instanceof nhn.api.map.DraggableMarker) {

     // 겹침 마커를 클릭했을 때.

     if (oCustomEvent.clickCoveredMarker) {

      return;

     }

     

     mapInfoTestWindow.setPoint(oTarget.getPoint());

     mapInfoTestWindow.setVisible(true);

     mapInfoTestWindow.autoPosition();

     return;

    }

   });

   

   var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언

   oMap.addOverlay(oLabel); // - 마커 라벨을 지도에 추가한다. 기본은 라벨이 보이지 않는 상태로 추가됨.



   oMap.attach("mouseenter", function(oEvent){

    var oTarget = oEvent.target;

    if(oTarget instanceof nhn.api.map.DraggableMarker){

     //oLabel.setVisible(true, oTarget); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.

    }

   });

   

   oMap.attach("mouseleave", function(oEvent) {

    var oTarget = oEvent.target;

    if(oTarget instanceof nhn.api.map.DraggableMarker){

     oLabel.setVisible(false);

    }

   });

   /*

   * draggable marker 의 자체 이벤트로 changePosition 이 있다.

   * 이 이벤트는, 사용자가 drag 를 이용해 마커의 위치를 옮길 때 발생한다.

   * oEvent 의 파라미터는 두 개로, oldPoint 와 newPoint 이다.

   * oldPoint 는 drag 하기 전의 마커 위치이며, newPoint 는 drag 한 이후의 마커 위치가 된다..

   */

   DraggableMarker.attach("changePosition" , function (oEvent) {

    if(mapInfoTestWindow.getVisible() != false){

     mapInfoTestWindow.setVisible(false); // - infowindow 의 표시 여부 지정.

     // - infoWindow 의 내용은 사용자가 임의로 지정할 수 있습니다. 단 HTML 로 지정을 하셔야 합니다.

     

     mapInfoTestWindow.setPoint(oEvent.newPoint);

     mapInfoTestWindow.setVisible(true);

     mapInfoTestWindow.autoPosition();

    }

   });

}







자바스크립트 함수 추가



mapParse("open","37.571027811", "127.0224897"); 로 실행







3. 주소로 위도 경도 값 가져오기(classic asp)









    Session.CodePage  = 65001



             
Response.CharSet  = "utf-8"



'



'            
addressStr = "건국대학교"



'



'



'            Set 
xmlHttp = Server.CreateObject("Microsoft.XMLHTTP")



'            
request_url 
= "http://openapi.map.naver.com/api/geocode.php?key=키값&encoding=utf-8&coord=latlng&query=" 
& Replace(addressStr," ","")



'            
xmlHttp.open "GET", request_url, false



'            
xmlHttp.send(null)



'            
str_xml = xmlHttp.ResponseText



'



'



'



'



'            If 
str_xml <> "" Then



'                        Set xmldoc = 
Server.CreateObject("Microsoft.XMLDOM")



'                        xmldoc.async = 
false



'                        
xmldoc.validateOnParse = false



'                        
xmldoc.loadXML(str_xml)



'



'



'



'



'                        If 
xmldoc.selectNodes("//total")(0).text > 0 Then



'                                   latStr 
= xmldoc.selectNodes("//y")(0).text    '위도



'                                    
lngStr = xmldoc.selectNodes("//x")(0).text  '경도



'                                    
address = xmldoc.selectNodes("//address")(0).text            '주소



'



'                        
Else



'                                    
latStr = "0"



'                                    
lngStr = "0"



'                        End 
If



'



'                        Set xmldoc = 
Nothing



'



'            
Else



'                        latStr = 
"0"



'                        lngStr = 
"0"



'            End 
If



 



' 
 Response.Write("addressStr 의 좌표는") & "<br />"



'            
Response.Write("위도 : " & latStr) & "<br />"



'            
Response.Write("경도 : " & lngStr)



'



'            Set 
xmlHttp = Nothing




















작성자:



시간:





댓글 없음:
  


































        

      









피드 구독하기:
글 (Atom)