project 3.5 Sulchelin 길찾기 API 끝

 

모달창으로 각각의 가게들의 위도와 경도를 넘겨주는 코드 구현 끝

 

 

 

function addHTML(suljipList) {
             for (let i = 0; i < suljipList.length; i++) {
                 let tempHtml = makeCard(suljipList[i], i);
                 $('#suljip-box').append(tempHtml);
             }
        }
        function makeCard(suljip, n) {
            return `<div class="card" id="card-${n}">
                        <div class="card-body">
                            <h5 class="card-title" id="suljip-title"><a href="#" class="suljip-title">${suljip['title']}</a></h5>
                            <h6 class="card-subtitle mb-2 text-muted">${suljip['category']}</h6>
                            <p class="card-text">${suljip['roadAddress']}</p>
                            <a href="${suljip['link']}" target="_blank" class="card-link"></a>
                            <a href="#" class="card-link">${suljip['telephone']}</a>
                            <input type="hidden" class="shop_lng" value="${suljip['mapx']}" />
                            <input type="hidden" class="shop_lat" value="${suljip['mapy']}" />
                            <button class="btn btn-outline-light" data-toggle="modal" data-target="#staticBackdrop" onclick="findLocation(${n})"><i class="fas fa-route fa-2x"></i></button>
                        </div>
                    </div>`;
        }

 

 

 

addHTML 을 for문을 돌아 i 를 생성했고, makeCard 함수에서는 n으로 i값을 넘겨 받는다.

그래서 카드 마다 index를 생성시켜줬고 findLocation (모달창)으로 넘어가는 버튼 함수에 (${n})을 넘겨줬다.

 

 

 

 

function findLocation(num) {
            $('#staticBackdrop').on('show.bs.modal', function (event) {
                //var edit_card = $(event.relatedTarget) // Button that triggered the modal
                var modal = $(this)
                console.log(num)


                const suljip_title0 = $('.suljip-title')[0]['innerText'];
                const suljip_title1  = $('.suljip-title')[1]['innerText'];
                const suljip_title2 = $('.suljip-title')[2]['innerText'];
                const suljip_title3 = $('.suljip-title')[3]['innerText'];
                const suljip_title4 = $('.suljip-title')[4]['innerText'];


                const ex0 = $('.shop_lng')[0]['defaultValue'];
                const ex1 = $('.shop_lng')[1]['defaultValue'];
                const ex2 = $('.shop_lng')[2]['defaultValue'];
                const ex3 = $('.shop_lng')[3]['defaultValue'];
                const ex4 = $('.shop_lng')[4]['defaultValue'];

                const ey0 = $('.shop_lat')[0]['defaultValue'];
                const ey1 = $('.shop_lat')[1]['defaultValue'];
                const ey2 = $('.shop_lat')[2]['defaultValue'];
                const ey3 = $('.shop_lat')[3]['defaultValue'];
                const ey4 = $('.shop_lat')[4]['defaultValue'];


                if(num == 0) {
                    var suljip_title = suljip_title0;
                    ex = ex0;
                    ey = ey0;
                } else if (num == 1) {
                    var suljip_title = suljip_title1;
                    ex = ex1;
                    ey = ey1;
                } else if (num == 2) {
                    var suljip_title = suljip_title2;
                    ex = ex2;
                    ey = ey2;
                } else if (num == 3) {
                    var suljip_title = suljip_title3;
                    ex = ex3;
                    ey = ey3;
                } else if (num == 4) {
                    var suljip_title = suljip_title4;
                    ex = ex4;
                    ey = ey4;
                } else {
                    alert('error');
                }

                // TM128 좌표를 위도(lat), 경도(lng) 딕셔너리로 반환
                let geoData = getLatLng(ex, ey);
                console.log(geoData)

                modal.find('.modal-title').text(suljip_title+'(으)로 가는길을 안내합니다. (내 위치 허용)')
                findRoute(geoData)

                })

 

 

 

5개까지만 카드가 생성이 되므로

1. 인덱스 넘버 0~4까지의 가게의 mapx, mapy 를 ex0~4, ey0~4으로 잡아줌

2. 버튼에서 넘어오는 카드의 넘버로 if 문 돌기. num 이 해당하는 숫자에 술집이름, mapx, mapy를 연결시켜준다. 

3. ex,ey 를 위도, 경도 딕셔너리로 변환하는 함수를 돌아 geoData로 저장

 

 

 

2는 카드의 인덱스 넘버. 3번째 카드이므로 2가 나오는게 맞음.

두번째 딕셔너리 lat, lng의 값은 가게의 위도, 경도

 

그 밑에 126.98~, 37.545~ 는 나의 위치

그 밑에 126.91~, 37.550~ 는 가게의 위치

 

 

이제 Odsay에서 받은 함수로 넘겨주면 되는데, 

 

 

ApiKey 어쓰 페일드.

왜냐면

 

URI, IP 가 안맞기 때문에...

localhost:5000 으로는 이 서비스를 이용하는게 불가능하기 때문에

AWS에 해당 프로젝트를 업로드 해줘야 잘 구동이 되는지 정확히 확인이 가능할 듯 하다.