본문으로 바로가기

프로그램/JavaScript 검색 결과

해당 글 5

입력값에 대해서 특수문자 제거 및 숫자만 이뤄지도록 하고 사용을 한다.




var hp = '01012345678';
hp = hp.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3"); 
크리에이티브 커먼즈 라이센스
Creative Commons License

댓글을 달아 주세요

[JAVASCRIPT] 카카오링크 링크 공유 오류(init문제 기록)

카카오톡 버튼을 클릭하면은 카카오톡이 실행되면서 메세지를 전송할 수 있게 하는 기능을 카카오에서는 제공을 하고 있습니다.
설명을 보면은 간단하게 처리를 할 수 있지만 한번 로딩된 페이지에서 카카오톡 전송 버튼을 1회 누르고 다시 누를경우에 문제가 발생하는 경우가 있어서 기록을 남겨 둡니다.

function sendKakalink() {
            Kakao.init('카카오톡API key');
            Kakao.Link.sendTalkLink({
                label: '메세지',
                image: {
                    src: '이미지 주소',
                    width: '이미지 넓이',
                    height: '이미지 높이'
                },
                webButton: {
                    text: '제목',
                    url: '웹페이지 URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
                }
             });
}


초기에는 위에 처럼 사용하여서 초기 전송에는 성공하였지만 한번 보낸후 다시 버튼을 누르면은 반응을 하지 않아서 수정 하게 되었습니다.
카카오의 개발자 포럼에서 어렵게 찾았습니다. 애초에 이런 문제가 일어난것이 제가 코드를 잘못 작성한것도 있지만은 레퍼런스에서는 전혀 설명이 되어 있지 않기도 합니다.

포럼에서 코멘트를 달아 주신분이 kakao.init 한번만 호출 해야 한다고 해서 카카오톡으로 링크를 보낼때 1번만 호출하도록 하였습니다.
임시 방편일 수도 있지만은 전혀 사용하지 않을수도 있고 해서 함수 호출 부분에 넣은것이 문제였나 봅니다.

아래는 함수 안에서 해결 하는 방법이며, 함수 밖에서 미리 호출을 해 놓아도 상관은 없을것 같은데, 전 그렇게 하지 않아서 일단 제가 해결하고 테스트해서 정상 작동되는 코드를 올려 놓습니다.

function sendKakalink() {
            try {
                if (Kakao) {
                    Kakao.init('카카오톡API key');
                };
            } catch(e) {};

            Kakao.Link.sendTalkLink({
                label: '메세지',
                image: {
                    src: '이미지 주소',
                    width: '이미지 넓이',
                    height: '이미지 높이'
                },
                webButton: {
                    text: '제목',
                    url: '웹페이지 URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
                }
             });
}



* 참조
카카오링크 개발자 가이드 주소  : https://developers.kakao.com/docs/js#%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EB%A7%81%ED%81%AC

카카오 포럼 링크 : https://devtalk.kakao.com/t/kakao-link-sendtalklink/3731
크리에이티브 커먼즈 라이센스
Creative Commons License

댓글을 달아 주세요

웹페이지 카카오로 공유하기


카카오톡 공유하기 위해서 필요한 자바스크립트를 호출 합니다.

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>


카카오톡에 메세지를 보내는 방법 입니다.

<script>
        function kakaoSend(){
            Kakao.init('API Key');
            Kakao.Link.sendTalkLink({
                label: '라벨',
                image: {
                    src: '이미지 주소', //http가 붙은 전체 경로
                    width: '넓이',
                    height: '높이'
                },
                webButton: {
                    text: '버튼 타이틀',
                    url: '링크URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
                }
             });
        }
</scritp>

<a href="#" onclick="kakaoSend(); return false;">카카오톡 공유</a>




카카오 스토리에 해당 페이지를 공유 할 수 있습니다.

<script>
        function shareStory() {
            Kakao.Story.share({
                url: '공유할 웹페이지 주소',
                text: '공유할 웹페이지 요약 혹은 메세지'
            });
        }
</scritp>

<a href="#" onclick="shareStory(); return false;">카카오스토리 공유</a>
크리에이티브 커먼즈 라이센스
Creative Commons License

댓글을 달아 주세요

네이버 지도 API 이용하기

네이버 지도 API키를 발급 받아야만이 사용 가능합니다.
발급 받을때는 사용할 도메인에 대해서 입력을 하기 때문에 키를 알아도 다른곳에 사용을 하기에는 무리가 있습니다.

API key 발급 홈페이지 : http://developer.naver.com/wiki/pages/OpenAPI


<script src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=API Key"></script>


네이버 지도 API 이용시에 X,Y 좌표가 필요하기때문에 꼭 X,Y 좌표를 알아서 입력해 주시기 바랍니다.
네이버 지도에서 좌표를 확일 할 수 있지만 API Key 가 있다면은 다음의 도메인으로 확인도 할 수 있습니다.

UTF-8 형식을 사용하기때문에 요청할때 한글 인코딩 처리를 해야 합니다.

http://openapi.map.naver.com/api/geocode?key=API Key&encoding=utf-8&coord=latlng&output=xml&query=한글 전체주소

위 주소로 요청할 경우에 다음과 같이 값이 리턴되어서 돌아 옵니다.
<geocode>
  <result>
    <userquery>서울특별시 영등포구 의사당대로 1 국회의사당</userquery>
    <total>1</total>
    <items>
      <item>
        <address>서울특별시 영등포구 의사당대로  1 국회</address>
          <addrdetail>
            <country>대한민국</country>
            <sido>서울특별시</sido>
            <sigugun>영등포구</sigugun>
            <dongmyun>의사당대로</dongmyun>
            <rest> 1 국회</rest>
          </addrdetail>
          <isRoadAddress>true</isRoadAddress>
          <point>
            <x>126.9141499</x>
            <y>37.5320453</y>
          </point>
        </item>
      </items>
  </result>
</geocode>


위 값을 가지고 DB에 저장을 해도 좋으며, 바로 javaScript에 넣어서 호출해도 좋습니다.

<script>
        var oPoint = new nhn.api.map.LatLng('Y좌표', 'X좌표'); // Y, X
        var oMap = new nhn.api.map.Map(document.getElementById('map'), {
                                point : oPoint,
                                zoom : 11,
                                enableWheelZoom : true,
                                enableDragPan : true,
                                enableDblClickZoom : true,
                                mapMode : 0,
                                activateTrafficMap : false,
                                activateBicycleMap : false,
                                activateRealtyMap : true,
                                minMaxLevel : [ 1, 14 ],
                                size : new nhn.api.map.Size(320,320)});
        // 줌 컨트롤러
        var oSlider = new nhn.api.map.ZoomControl();
        oMap.addControl(oSlider);
        oSlider.setPosition({ top:15, left:15 });
        //아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
        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);
        //icon 이미지를 바꿔서 사용할 수 있습니다.
        var oMarker = new nhn.api.map.Marker(oIcon, { title : "지도에표시할문자" });
        oMarker.setPoint(oPoint);
        oMap.addOverlay(oMarker);
        // 마커라벨 표시
        var oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언
        oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨
        oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기 
</script>



웹사이트를 만들때 사용한 부분인데 현재 잘 작동하는지는 알 수 없습니다.
하지만 좀 더 사용해 보면은 큰 도움이 될 정보일듯 해서 기록은 해 놓지만은 정확히 않음을 미리 공지 합니다.

지도 확대보기 사용하기 : http://map.naver.com/?dlevel=12&pinType=site&pinId=&x=X좌표&y=Y좌표&enc=b64

네이버 지도 길 찾기 URL : http://m.map.naver.com/route.nhn?menu=route&&ename=네이버 정식 명칭&ex=X좌표&ey=Y좌표
크리에이티브 커먼즈 라이센스
Creative Commons License

댓글을 달아 주세요

  1. ㅈㅇ 2016/08/04 14:18

    혹시 이번년도 들어와서 바뀐 인증방식으로 수정하셨는지요..

    • Trudy 2016/08/15 11:40

      블로그에는 불규칙으로 접속을 하여서 이제서야 봤습니다.

      이번년도 2016년도에 들어와서는 바뀐 인증방식에 대해서 알아보지 않았습니다.

      저도 작년(2015)에 하고는 글 작성후에 다시 재 작성을 하지 않아서요

구글 지도 이용하기


먼저 자바스크립트를 로드합니다.
구글에서 가져오는게 가장 최신으로 가져 온다고 판단이 되기에 구글에서 자바스크립트를 로드 합니다.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

내용을 가지고와서 로컬에 가져도 되지만은 링크하는게 좋을듯 합니다.
세계 최강의 검색업체인 구글인데 오류가 가장 적을듯 합니다.

<script>
//구글맵 v3
function initialize() {
    var geocoder = new google.maps.Geocoder();
    var addr="정식 주소";
    var lat="";
    var lng="";
    geocoder.geocode({'address':addr},
        function(results, status){
            if(results!=""){
                var location=results[0].geometry.location;
                lat=location.lat();
                lng=location.lng(); 
                var latlng = new google.maps.LatLng(lat , lng);
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
marker = new google.maps.Marker({
map:map,
position: latlng
});
            }
            else $("#map_canvas").html("위도와 경도를 찾을 수 없습니다.");
        }
    )
}
</script>


이렇게 하고 원하는 곳에 ID 값을 주면은 바로 로드 할 수 있을 것입니다.

크리에이티브 커먼즈 라이센스
Creative Commons License

댓글을 달아 주세요

Trudy
Trudy 님의 블로그
MENU
VISITOR 오늘345 / 전체462451