크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

컨텐츠몰 10% 할인
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

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

감사합니다.

추천10

댓글 전체

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

function kakaonavi7(){
        Kakao.Navi.start({
            name: "옆집",
            x: 127.032423,
            y: 37.490928,
            coordType: 'wgs84'
        });
    }
전체 1,658 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여5 회 시작20.05.27 19:24 종료20.06.01 19:24

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT