SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

모바일 버전에 카카오네비 연결하기 > 그누보드5 팁자료실

그누보드5 팁자료실

모바일 버전에 카카오네비 연결하기 정보

모바일 버전에 카카오네비 연결하기

본문

237736610_1586787089.4259.jpg

 

위 이미지는 예시 이미지 입니다.

모바일 버전에서 버튼 클릭시 주소를 토대로 카카오네비를 바로 열어주면 좋겠다 하여

작업 해보았고 유용할것 같아서 공유 합니다~

아래 게시물에 T맵 네비도 올려두었습니다. 참고하셔요

 

 

0. 카카오네비 열기 링크 및 스크립트를 모바일버전에 추가 합니다.
 

<a href="javascript:void(0);" onclick="kakaonavi();">카카오네비</a>

 

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('①JavaScript 키값');
 

    // 네비로 표기될 정보를 넣어주세요.
    function kakaonavi(){
        Kakao.Navi.start({
            name: "②상호명",
            x: ③경도,
            y: ③위도,
            coordType: 'wgs84'
        });
    }
</script>

 

링크 디자인은 알아서 잘..이쁘게.. 하시면 되고 ㅎ
반응형의 경우 그누에 내장된 모바일 체크 함수로 모바일 접속의 경우에만
보일 수 있도록 처리할 수 있습니다.

 


<?php if($is_mobile) { ?>
    //모바일접속시 보여질 부분 코딩
    //위 a링크를 넣어주면 되겠죠?
<?php } ?>

 

 

1. JavaScript 키값을 Kakao.init('①JavaScript 키값'); 에 넣어줍니다.
1-1. 키 발급방법은 https://mine-it-record.tistory.com/218 참조
1-2. JavaScript 키값을 넣어주시면 됩니다.

 

237736610_1586785474.7821.jpg

 

 

2. 상호명을 name: "②상호명", 에 넣어줍니다. (네비 표기용)

 

 

3. x: ③경도, y: ③위도, 에 값을 넣어줍니다.
3-1. 경도와 위도는 https://www.google.co.kr/maps/ 에 접속한 후
3-2. 카카오네비로 연결 하고자하는 주소를 입력 하시고
3-3. 검색한 지점의 마커에 마우스 우클릭 후 이곳이궁금한가요? 클릭

 

237736610_1586780931.4271.png

 

3-4. 하단에 나오는 위도와 경도를 넣어주시면 됩니다. (37.490920 은 위도, 127.032455 은 경도 입니다.)

 

237736610_1586780946.8634.png

 

끝났습니다. 키발급 부분만 잘 해결하시면 코드는 별거 없습니다~ 쉽죠?

 

 

완성된 예제코드

<a href="javascript:void(0);" onclick="kakaonavi();">카카오네비</a>

 

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('xxxxxxxxxxxxxxxxxx');
 

    // 네비로 표기될 정보를 넣어주세요.
    function kakaonavi(){
        Kakao.Navi.start({
            name: "(주)에스아이알소프트",
            x: 127.032423,
            y: 37.490928,
            coordType: 'wgs84'
        });
    }
</script>



4. 모바일버전으로 접속하여 테스트 해봅니다.
사용기기에 카카오맵이 설치되어 있지 않은 경우 웹용 네비를 보여주고
설치되어 있는 경우 앱으로 안내 합니다.

감사합니다.

추천13

댓글 전체

a링크에 onclick="kakaonavi7();" 형태로 숫자를 추가하시고
function 역시 동일하게 맞춰서 추가하시면 될거같습니다~

function kakaonavi7(){
        Kakao.Navi.start({
            name: "옆집",
            x: 127.032423,
            y: 37.490928,
            coordType: 'wgs84'
        });
    }
카카오네비가 아이폰에서 실행하면 바로 길찾기가 되지않고 카카오내비 실행후 내비버튼누르면 길찾기가 되내요. 원인이 뭘까요?
카카오에서 제공해주는 API를 활용해서
네비로 주소만 넘겨주고 있습니다~

나머지는 카카오 네비 앱에서 처리를 하는 부분인데
아이폰이 없어서 테스트를 해볼수가 없네요 ㅠ.ㅠ
전체 1,748 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT