로그인

검색

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
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
2 추천
Atachment
첨부 '0'

라이믹스 팁(112)

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

  1. read more
  2. read more
  3. Read More
  4. 라이믹스 읽지 않은 쪽지(새쪽지) 표시해 주기 7

    Date2022.05.01 Category기능 Views508 Votes3
    Read More
  5. Read More
  6. 라이믹스 게시판 목록에서 문서의 태그 출력해 주기 10

    Date2022.01.30 Category기능 Views2582 Votes5
    Read More
  7. Read More
  8. 라이믹스 설문조사 비회원참여를 막는 방법 2

    Date2021.12.05 Category기능 Views171 Votes2
    Read More
  9. 쿠키를 이용한 목록 스타일 변경 제공하기 1

    Date2021.11.20 Category기능 Views182 Votes4
    Read More
  10. Read More
  11. Read More
  12. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기 6

    Date2021.10.28 Category기능 Views183 Votes2
    Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
Prev 1 2 3 4 Next
/ 4