20221120 - 외부경로 이미지로 버튼 이미지 변경 후 카카오내비 연계

1. 버튼 생성

Identification - 

Button Name : BTN_NAVI

Label : <img src="https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_small.png"> 

Appearance - 

Template Option : Use Template Option, Tiny, Remove UI Decoration

Dynamic Action - Execute Javascript Code 

var vCordX = parseFloat(apex.item("P632_CORDX").getValue());

var vCordY = parseFloat(apex.item("P632_CORDY").getValue());

var vNM    = apex.item("P632_CUST_NM").getValue();

Kakao.Navi.start({

    name: vNM+' 님',

    x: vCordX,

    y: vCordY,

    coordType: 'wgs84',

});

======================

사전에 별도의 Static HTML 리전을 만들어 카카오내비 API를 사용할 수 있어야 함.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.0.1/kakao.min.js" 

    integrity="sha384-eKjgHJ9+vwU/FCSUG3nV1RKFolUXLsc6nLQ2R1tD0t4YFPCvRmkcF8saIfOZNWf/" crossorigin="anonymous">

</script>

<script>Kakao.init('{카카오 Javascript API 키}');</script>

샘플예제 by Kakao DEV

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.0.1/kakao.min.js"

  integrity="sha384-eKjgHJ9+vwU/FCSUG3nV1RKFolUXLsc6nLQ2R1tD0t4YFPCvRmkcF8saIfOZNWf/" crossorigin="anonymous"></script>

<script>

  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 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>

참고

https://developers.kakao.com/tool/demo/navi/start

https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_small.png

https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png