네이버 맵 (기본 맵 + 마커) v3

Open API/Naver|2016. 12. 20. 17:59
반응형

네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )


Test Url : http://www.uhoon.co.kr/test/995.html

네이버 API 키 발급 Url : https://dev.naver.com/openapi/register


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>네이버 맵 마커 </title>
  <style>v\:* { behavior: url(#default#VML); }</style>
  <!-- prevent IE6 flickering -->
  <script type="text/javascript">
   try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
  </script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버맵키"></script>
 </head>
 <body>
 <div id = "naverMap" style="border:1px solid #000; width:700px; height:400px; margin:20px; display:block;"></div>
 <script type="text/javascript">
    var oPoint = new nhn.api.map.LatLng(37.7396101, 127.0623053);
    nhn.api.map.setDefaultPoint('LatLng');
    oMap = new nhn.api.map.Map('naverMap', {
        center : oPoint,
        level : 10, // 줌 초기 값 10.
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        activateRealtyMap : true,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size(500, 400)
    });
 
    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
 
    // 마커 찍기
    var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '유느님이 계신 곳 ' });  //마커 생성
    oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
    oMap.addOverlay(oMarker1); //마커를 지도위에 표현
 
    //라벨 넣기
    var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
    oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
 
  </script>
 </body>
</html>


저작자표시

댓글()

네이버 스마트 에디터 ( 이미지 업로드 포함 )

Open API/Naver|2016. 12. 14. 23:21
반응형

스마트 에디터에 이미지 업로드 기능을 추가된 샘플 소스입니다..

jimmy1775 님께서 asp 업로드 모듈을 개발해주시고  idtong 님께서 jsp 모듈을 개발해주셨습니다..


감사드립니다.


Test UIrl : http://www.uhoon.co.kr/test/988/SmartEditor/SEditorDemo.html



DownLoad : SmartEditor.zip


 smart Editor PHP Upload module.zip(2013.06.30 추가)



ps. 추가로 이미지 업로드 가능한 mimetype 을 일부 추가하였습니다..( png 등...)


 



적용 방법 : 

1. 압축 해제 후 SEditorDemo.html 파일을 제외한 나머지 파일은 에디터가 삽입될 페이지와 같은 경로에 업로드하거나

 또는 임의의 위치에 압축 해제 후 include된 경로를 수정하여 업로드 합니다.

( 아래 설명은 같은 경로에 업로드한 기준입니다.)


2. SEditorDemo.html 파일을 참고하여 에디터가 삽입될 페이지내에 소스를 추가합니다.




-include

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/HuskyEZCreator.js" charset="utf-8"></script>

- Javascript 
<script>
//form변수로 지정하여 이미지업로드 페이지에서 호출하여 사용됨. form.filepath.value
var form = document.w_form;   // 사용할 폼 이름으로 수정.
 
//에디터호출 - <table> 안에 넣으면 안됨.
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SEditorSkin.html", "createSEditorInIFrame", null, true);
 
//이미지삽입 - 업로드 완료페이지에서 호출됨.
function insertIMG(fname){
  var filepath = form.filepath.value;
  var sHTML = "<img src='" + filepath + "/" + fname + "' style='cursor:hand;' border='0'>";  
    // filepath 는 변수처리 혹은 직접 코딩해도 상관없음. 
    // imageUpload.asp 에서 insertIMG 호출시 경로를 포함하여 넣어주는 방법을 추천.
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
 
function pasteHTMLDemo(){
  sHTML = "<span style='color:#FF0000'>이미지 등도 이렇게 삽입하면 됩니다.</span>";
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
 
function showHTML(){
  alert(oEditors.getById["ir1"].getIR());
}
 
function onSubmit(){
  // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
  oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
 
  // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
  form.content.value = document.getElementById("ir1").value;
 
  if(form.content.value == ""){
    alert("\'내용\'을 입력해 주세요");
    return;
  }
 
  var msg = "전송 하시겠습니까?"
  if(confirm(msg)){
    form.submit();
  }
  return;
}
</script>


- html
<form name="w_form" action="sample.asp" method="post">
<input type="hidden" name="filepath" value="/file"> <!-- 이미지업로드 경로 변수처리 혹은 직접 코딩.. -->
  <p>
    <input type="button" onclick="pasteHTMLDemo()" value="본문에 HTML 삽입"></input>
    <input type="button" onclick="showHTML()" value="본문 HTML 보기"></input>
    <input type="button" onclick="onSubmit()" value="서버에 전송"></input>
  </p>
  <textarea name="ir1" id="ir1" style="width:700px; height:400px"><p>에디터에 기본으로 삽입할 글(수정 모드)이 없다면 이 값을 지정하지 않으시면 됩니다.</p></textarea>
  <textarea id="content" name="content" style="display:none"></textarea>
</form>



위와 같이 적용하면 에디터는 뜹니다..

에디터 내에 값 넣기 , 가져오기 등은 pasteHTMLDemo() , showHTML() 함수를 참고하세요.

관련하여 이미지 업로드는 imgUpload.html 과 imgUpload.asp 파일을 수정하시면 됩니다.
jsp 와 asp 업로드 샘플 소스파일은 upModule 폴더안에 있으니 참고하세요


저작자표시

댓글()
이전 1 다음

티스토리툴바