로그인

검색

Extra Form
추천지수 7
주소 04524 서울 중구 세종대로 110 (서울 중구 태평로1가 31) (태평로1가, 서울특별시청)
상호명 서울시청

이미 라이믹스에서 주소를 입력받아 카카오지도에 마커를 표시해 주는 팁을 작성해 드렸습니다. 

https://rxtip.kr/rx_tip/5201

 

위 팁에 추가로 해당 마커의 위치를 도착지로 하여 카카오내비로 연동되는 기능을 추가해 보려고 합니다.

 

 

Screenshot_20210508-100204_Brave.jpg

 

지도 위에 카카오내비 길찾기 라는 버튼을 달아주고 해당 버튼을 눌렀을때 카카오내비 앱이 열리면서 자동으로 마커의 위치로 길안내가 시작됩니다.

 

 

라이믹스에 주소로 위치를 카카오지도를 연동해서 출력해주는 것을 구현해야 하니 위 링크해드린 게시글을 보고 완성을 해주세요.

 

이미 카카오지도를 출력하기 위해 넣어둔 스크립트의 맨 하단에 아래 함수를 추가해 주세요. (기존 작성한 스크립트의 안쪽 하단에 추가)

- 이 함수만 따로 스크립트로 만들어 카카오내비 연동을 하면 작동을 하지 않습니다. 기존 스크립트에 추가해야 하는 것으로 작성되어 있습니다.

 

function navi(){
geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[1];}', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {
     var coords1 = new kakao.maps.LatLng(result[0].y, result[0].x);
Kakao.Navi.start({
  name: "{$oDocument->getExtraEidValueHTML('place_name');}",
  x: coords1.La,
  y:  coords1.Ma,
  coordType: 'wgs84'
});
}
});
}

 

{$oDocument->getExtraEidValue('address')[1];}

이 들어간 이유는 이전 팁에서 주소입력을 address의 id로 사용자정의로 생성했기 때문이니다. 주소로 한번더 좌표를 받아오기 위해서 사용했습니다.

 

{$oDocument->getExtraEidValueHTML('place_name');}

위 내용은 이전 팁에서 사용자정의에 마커에 표시될 이름으로 place_name 의 id를 사용해서 생성했기 때문에 연결이 되는 내용입니다.

 

위 함수를 호출하게 되면 지도 중심좌표를 목적지로 해서 카카오내비 길안내와 연결이 됩니다.

 

 

 

 

이제 위 함수를 호출할 버튼을 지도를 삽입했던 위치 지도 바로 위에 만들어 줍니다.

 

<div cond="$oDocument->getExtraEidValue('address')[1]">
<a cond="Mobile::isMobileCheckByAgent()" href="#" onclick="navi(); return false;">카카오내비 길찾기</a>
</div>

 

div에 조건은 이전 팁에서 주소를 입력받은 사용자정의 id로 입력이 있을때만 노출되도록 하는 조건을 동일하게 사용했습니다. 이 버튼의 위치에 따라서 적절히 사용하시면 될 것 같습니다.

 

버튼 a 태그에 모바일에서만 작동되도록 조건이 걸려있습니다. 

 

위 링크 버튼을 클릭하면  스크립트에 삽입해 놓았던 함수가 호출이 되면서 카카오내비가 열리고 길안내가 시작됩니다.

 

위치정보

Who's 꿀팁관리소장

profile

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

Atachment
첨부 '0'

라이믹스 팁(76)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views54 Votes0
    Read More
  15. Read More
  16. Read More
  17. Read More
  18. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views45 Votes0
    Read More
  19. Read More
  20. Read More
  21. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views52 Votes0
    Read More
  22. Read More
  23. Read More
  24. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views46 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views34 Votes0
    Read More
  29. Read More
  30. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views49 Votes0
    Read More
  31. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views43 Votes0
    Read More
  32. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views73 Votes0
    Read More
Board Pagination Prev 1 2 3 Next
/ 3