모바일 버전에 카카오네비 연결하기
위 이미지는 예시 이미지 입니다.
모바일 버전에서 버튼 클릭시 주소를 토대로 카카오네비를 바로 열어주면 좋겠다 하여
작업 해보았고 유용할것 같아서 공유 합니다~
아래 게시물에 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>
링크 디자인은 알아서 잘..이쁘게.. 하시면 되고 ㅎ
반응형의 경우 그누에 내장된 모바일 체크 함수로 모바일 접속의 경우에만
보일 수 있도록 처리할 수 있습니다.
[code]
<?php if($is_mobile) { ?>
//모바일접속시 보여질 부분 코딩
//위 a링크를 넣어주면 되겠죠?
<?php } ?>
[/code]
1. JavaScript 키값을 Kakao.init('①JavaScript 키값'); 에 넣어줍니다.
1-1. 키 발급방법은 https://mine-it-record.tistory.com/218 참조
1-2. JavaScript 키값을 넣어주시면 됩니다.
2. 상호명을 name: "②상호명", 에 넣어줍니다. (네비 표기용)
3. x: ③경도, y: ③위도, 에 값을 넣어줍니다.
3-1. 경도와 위도는 https://www.google.co.kr/maps/ 에 접속한 후
3-2. 카카오네비로 연결 하고자하는 주소를 입력 하시고
3-3. 검색한 지점의 마커에 마우스 우클릭 후 이곳이궁금한가요? 클릭
3-4. 하단에 나오는 위도와 경도를 넣어주시면 됩니다. (37.490920 은 위도, 127.032455 은 경도 입니다.)
끝났습니다. 키발급 부분만 잘 해결하시면 코드는 별거 없습니다~ 쉽죠?
완성된 예제코드
<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. 모바일버전으로 접속하여 테스트 해봅니다.
사용기기에 카카오맵이 설치되어 있지 않은 경우 웹용 네비를 보여주고
설치되어 있는 경우 앱으로 안내 합니다.
감사합니다.
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 35개
신기해 하시고 완전 만족 하시네요!
한페이지에서 여러개를 사용해야 하는경우에 구분이 필요한데 어떻게 처리 해야 할까요?
function 역시 동일하게 맞춰서 추가하시면 될거같습니다~
function kakaonavi7(){
Kakao.Navi.start({
name: "옆집",
x: 127.032423,
y: 37.490928,
coordType: 'wgs84'
});
}
네비로 주소만 넘겨주고 있습니다~
나머지는 카카오 네비 앱에서 처리를 하는 부분인데
아이폰이 없어서 테스트를 해볼수가 없네요 ㅠ.ㅠ
Genius ^^
카카오네비 스크립트가 변경 되었네요
사용하실분들은 참조해주세요
개발문서 링크 입니다.
https://developers.kakao.com/tool/demo/navi/start
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>
<script>
Kakao.init('카카오지도 스크립트 키입력'); // 사용하려는 앱의 JavaScript 키 입력
</script>
<a id="start-navigation" href="javascript:startNavigation()">
<img src="https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"
alt="길 안내하기 버튼" />
</a>
<script>
function startNavigation() {
Kakao.Navi.start({
name: '현대백화점 판교점',
x: 127.11205203011632,
y: 37.39279717586919,
coordType: 'wgs84',
});
}
</script>