index.ejs 30 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Modern Business - Start Bootstrap Template</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8&libraries=services,clusterer,drawing"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            function makeOverListener(map, marker, infowindow) {
                return function() {
                    infowindow.open(map, marker);
                };
            }
            // 인포윈도우를 닫는 클로저를 만드는 함수입니다
            function makeOutListener(infowindow) {
                return function() {
                    infowindow.close();
                };
            }
            // 고속도로 선택 함수
            function showline(lineNumber){


                let highway_Area = document.getElementById('highway');
                if(lineNumber==='0010'){
                    highway_Area.innerHTML = '경부선';
                }
                else if(lineNumber==='0550'){
                    highway_Area.innerHTML = '중앙선';
                }
                else if(lineNumber==='0500'){
                    highway_Area.innerHTML = '영동선';
                }
                // 이 위치에 이전에 켜져있는 map을 지우는 기능 넣어야해 ...
                var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스

                var options = { //지도를 생성할 때 필요한 기본 옵션
                center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
                    level: 13 //지도의 레벨(확대, 축소 정도)
                };
                var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
                line = []

                //csv 파일에서 이정 좌표 가져와서 line 변수에 저장
                $.ajax({
                url: 'data.csv',
                dataType: 'text',
                async: false,
                success: function(data){
                    var allRows = data.split(/\r?\n|\r/);

                    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
                        var rowCells = allRows[singleRow].split(',');
                        if(rowCells[0] == lineNumber){
                            line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
                        }
                    }
                }
                });
                var polyline = new kakao.maps.Polyline({
                    path: line, // 선을 구성하는 좌표배열 입니다
                    strokeWeight: 5, // 선의 두께 입니다
                    strokeColor: '#FF4500', // 선의 색깔입니다
                    strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
                    strokeStyle: 'solid' // 선의 스타일입니다
                });
                polyline.setMap(map)


                var userData;
                var markers = [];
                var infos = [];
                var routeCodes = [];
                var svarAddrs = [];
                var rest_names = [];
                // 1번 페이지
                $.ajax({
                    url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
                    async:false,
                    success: function(data){
                        //변수 설정
                        userData = data;
                    },
                }).done(function() {
                    var routeCode = "";
                    var svarAddr = "";
                    var rest_name = "";
                    var data_count = userData["list"].length    // 데이터 개수 얻기

                    for (var i =0; i<data_count; i++){
                        routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
                        svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
                        rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);

                        if(routeCode.substring(1,5) === lineNumber){    //  고속도로 코드가 같다면

                            routeCodes.push(routeCode);
                            svarAddrs.push(svarAddr);
                            rest_names.push(rest_name);
                            var geocoder = new kakao.maps.services.Geocoder();

                        }
                    }
                    svarAddrs.forEach(function(addr,index){
                        geocoder.addressSearch(addr,function(result,status){
                            if(status === kakao.maps.services.Status.OK){
                                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                                var marker = new kakao.maps.Marker({
                                    position:coords,
                                    map:map,
                                })
                                var infowindow = new kakao.maps.InfoWindow({
                                    content: rest_names[index],
                                });
                                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
                            }
                        })
                    })
                })

                // 2번 페이지
                $.ajax({
                    url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
                    async:false,
                    success: function(data){
                        //변수 설정
                        userData = data;
                    },
                }).done(function() {
                    var routeCode = "";
                    var svarAddr = "";
                    var rest_name = "";
                    var data_count = userData["list"].length    // 데이터 개수 얻기

                    for (var i =0; i<data_count; i++){
                        routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
                        svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
                        rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);

                        if(routeCode.substring(1,5) === lineNumber){    //  고속도로 코드가 같다면

                            routeCodes.push(routeCode);
                            svarAddrs.push(svarAddr);
                            rest_names.push(rest_name);
                            var geocoder = new kakao.maps.services.Geocoder();

                        }
                    }
                    svarAddrs.forEach(function(addr,index){
                        geocoder.addressSearch(addr,function(result,status){
                            if(status === kakao.maps.services.Status.OK){
                                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                                var marker = new kakao.maps.Marker({
                                    position:coords,
                                    map:map,
                                })
                                var infowindow = new kakao.maps.InfoWindow({
                                    content: rest_names[index],
                                });
                                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
                            }
                        })
                    })
                })

                // 3번 페이지
                $.ajax({
                    url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
                    async:false,
                    success: function(data){
                        //변수 설정
                        userData = data;
                    },
                }).done(function() {
                    var routeCode = "";
                    var svarAddr = "";
                    var rest_name = "";
                    var data_count = userData["list"].length    // 데이터 개수 얻기

                    for (var i =0; i<data_count; i++){
                        routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
                        svarAddr = JSON.stringify(userData["list"][i]["svarAddr"]);
                        rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]);

                        if(routeCode.substring(1,5) === lineNumber){    //  고속도로 코드가 같다면

                            routeCodes.push(routeCode);
                            svarAddrs.push(svarAddr);
                            rest_names.push(rest_name);
                            var geocoder = new kakao.maps.services.Geocoder();

                        }
                    }
                    svarAddrs.forEach(function(addr,index){
                        geocoder.addressSearch(addr,function(result,status){
                            if(status === kakao.maps.services.Status.OK){
                                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                                var marker = new kakao.maps.Marker({
                                    position:coords,
                                    map:map,
                                })
                                var infowindow = new kakao.maps.InfoWindow({
                                    content: rest_names[index],
                                });
                                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
                            }
                        })
                    })
                })
            }

        </script>
    </head>
    <body class="d-flex flex-column h-100">
        <main class="flex-shrink-0">
            <!-- Navigation-->
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container px-5">
                    <a class="navbar-brand" href="/">휴게소 정보</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation"><span
                            class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="/menu">휴게소 메뉴</a></li>
                            <li class="nav-item"><a class="nav-link" href="/weather">날씨</a></li>
                            <li class="nav-item"><a class="nav-link" href="/lpg">LPG</a></li>
                            <li class="nav-item"><a class="nav-link" href="/post">Board</a></li>
                            <% if(session.sessId){ %>
                                <li class="nav-item"><a class="nav-link" href="/logout">Log-Out</a></li>
                            <% } else { %>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" id="navbarDropdownLogin" href="#" role="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">Login</a>
                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownLogin">
                                        <li><a class="dropdown-item" href="/login">Login</a></li>
                                        <li><a class="dropdown-item" href="/signup">Sign-up</a></li>
                                    </ul>
                                </li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- Header-->
            <header class="bg-dark py-5">
                <div class="container px-5">
                    <div class="row gx-5 align-items-center justify-content-center">
                        <div class="col-lg-8 col-xl-7 col-xxl-6">
                            <div class="my-5 text-center text-xl-start">
                                <h1 class="display-5 fw-bolder text-white mb-2">고속도로선택시 경로와 휴게소가 지도에 표시됩니다.</h1>
                                <p class="lead fw-normal text-white-50 mb-4">고속도로를 선택해주세요</p>
                                <div class="dropdown">
                                    <button class ="btn btn-primary dropdown-toggle " id= "highway"data-bs-toggle="dropdown">
                                        고속도로 선택
                                    </button>
                                    <div class ="dropdown-menu">
                                        <a class="dropdown-item" onclick="showline('0010')">경부선</a>
                                        <a class="dropdown-item" onclick="showline('0550')">중앙선</a>
                                        <a class="dropdown-item" onclick="showline('0500')">영동선</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            // 지도 구현 부분
                        </script>
                        <div id="map" style="width:600px;height:400px;"></div>

                        <script>
                            var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스

                            var options = { //지도를 생성할 때 필요한 기본 옵션
                            center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
                                level: 13 //지도의 레벨(확대, 축소 정도)
                            };
                            var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

                            // 마커표시
                            var geocoder = new kakao.maps.services.Geocoder();

                            // 휴게소 주소 입력시, 마커 표시 및 이동
                            geocoder.addressSearch('경기도 용인시 고림동9', function(result, status) {
                                // 정상적으로 검색이 완료됐으면

                                if (status === kakao.maps.services.Status.OK) {
                                    var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                                    // 결과값으로 받은 위치를 마커로 표시합니다
                                    var marker = new kakao.maps.Marker({
                                        map: map,
                                        position: coords
                                    });

                                    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                                    map.setLevel(4);
                                    map.setCenter(new kakao.maps.LatLng(result[0].y, result[0].x));

                                }
                            });


                        </script>
                    </div>
                </div>
            </header>
            <!--


            <section class="py-5" id="features">
                <div class="container px-5 my-5">
                    <div class="row gx-5">
                        <div class="col-lg-4 mb-5 mb-lg-0"><h2 class="fw-bolder mb-0">여기는 나중에 추천메뉴 넣으면..?</h2></div>
                        <div class="col-lg-8">
                            <div class="row gx-5 row-cols-1 row-cols-md-2">
                                <div class="col mb-5 h-100">
                                    <div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-collection"></i></div>
                                    <h2 class="h5">Featured title</h2>
                                    <p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
                                </div>
                                <div class="col mb-5 h-100">
                                    <div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-building"></i></div>
                                    <h2 class="h5">Featured title</h2>
                                    <p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
                                </div>
                                <div class="col mb-5 mb-md-0 h-100">
                                    <div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
                                    <h2 class="h5">Featured title</h2>
                                    <p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
                                </div>
                                <div class="col h-100">
                                    <div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-toggles2"></i></div>
                                    <h2 class="h5">Featured title</h2>
                                    <p class="mb-0">Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            -->
            <!-- Testimonial section-->
            <div class="py-5 bg-light">
                <div class="container px-5 my-5">
                    <div class="row gx-5 justify-content-center">
                        <div class="col-lg-10 col-xl-7">
                            <div class="text-center">
                                <div class="fs-4 mb-4 fst-italic" id ="testArea">Developed by ...</div>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                    <div class="fw-bold">
                                        지창언
                                        <span class="fw-bold text-primary mx-1">/</span>
                                        2018110536
                                        <span class="fw-bold text-primary mx-1"> </span>
                                    </div>
                                    <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                    <div class="fw-bold">
                                        김민규
                                        <span class="fw-bold text-primary mx-1">/</span>
                                        2018102164
                                        <span class="fw-bold text-primary mx-1"> </span>
                                    </div>
                                    <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                    <div class="fw-bold">
                                        이서현
                                        <span class="fw-bold text-primary mx-1">/</span>
                                        2021105623
                                        <span class="fw-bold text-primary mx-1"> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Blog preview section
            <section class="py-5">
                <div class="container px-5 my-5">
                    <div class="row gx-5 justify-content-center">
                        <div class="col-lg-8 col-xl-6">
                            <div class="text-center">
                                <h2 class="fw-bolder">From our blog</h2>
                                <p class="lead fw-normal text-muted mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad.</p>
                            </div>
                        </div>
                    </div>
                    <div class="row gx-5">
                        <div class="col-lg-4 mb-5">
                            <div class="card h-100 shadow border-0">
                                <img class="card-img-top" src="https://dummyimage.com/600x350/ced4da/6c757d" alt="..." />
                                <div class="card-body p-4">
                                    <div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
                                    <a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Blog post title</h5></a>
                                    <p class="card-text mb-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                </div>
                                <div class="card-footer p-4 pt-0 bg-transparent border-top-0">
                                    <div class="d-flex align-items-end justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                            <div class="small">
                                                <div class="fw-bold">Kelly Rowan</div>
                                                <div class="text-muted">March 12, 2022 &middot; 6 min read</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-5">
                            <div class="card h-100 shadow border-0">
                                <img class="card-img-top" src="https://dummyimage.com/600x350/adb5bd/495057" alt="..." />
                                <div class="card-body p-4">
                                    <div class="badge bg-primary bg-gradient rounded-pill mb-2">Media</div>
                                    <a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">Another blog post title</h5></a>
                                    <p class="card-text mb-0">This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                </div>
                                <div class="card-footer p-4 pt-0 bg-transparent border-top-0">
                                    <div class="d-flex align-items-end justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                            <div class="small">
                                                <div class="fw-bold">Josiah Barclay</div>
                                                <div class="text-muted">March 23, 2022 &middot; 4 min read</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-5">
                            <div class="card h-100 shadow border-0">
                                <img class="card-img-top" src="https://dummyimage.com/600x350/6c757d/343a40" alt="..." />
                                <div class="card-body p-4">
                                    <div class="badge bg-primary bg-gradient rounded-pill mb-2">News</div>
                                    <a class="text-decoration-none link-dark stretched-link" href="#!"><h5 class="card-title mb-3">The last blog post title is a little bit longer than the others</h5></a>
                                    <p class="card-text mb-0">Some more quick example text to build on the card title and make up the bulk of the card's content.</p>
                                </div>
                                <div class="card-footer p-4 pt-0 bg-transparent border-top-0">
                                    <div class="d-flex align-items-end justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
                                            <div class="small">
                                                <div class="fw-bold">Evelyn Martinez</div>
                                                <div class="text-muted">April 2, 2022 &middot; 10 min read</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <!-- Call to action
                    <aside class="bg-primary bg-gradient rounded-3 p-4 p-sm-5 mt-5">
                        <div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start">
                            <div class="mb-4 mb-xl-0">
                                <div class="fs-3 fw-bold text-white">New products, delivered to you.</div>
                                <div class="text-white-50">Sign up for our newsletter for the latest updates.</div>
                            </div>
                            <div class="ms-xl-4">
                                <div class="input-group mb-2">
                                    <input class="form-control" type="text" placeholder="Email address..." aria-label="Email address..." aria-describedby="button-newsletter" />
                                    <button class="btn btn-outline-light" id="button-newsletter" type="button">Sign up</button>
                                </div>
                                <div class="small text-white-50">We care about privacy, and will never share your data.</div>
                            </div>
                        </div>
                    </aside>
                </div>
            </section>-->
        </main>
        <!-- Footer-->
        <footer class="bg-dark py-4 mt-auto">
            <div class="container px-5">
                <div class="row align-items-center justify-content-between flex-column flex-sm-row">
                    <div class="col-auto"><div class="small m-0 text-white">Copyright &copy; Your Website 2022</div></div>
                    <div class="col-auto">
                        <a class="link-light small" href="#!">Privacy</a>
                        <span class="text-white mx-1">&middot;</span>
                        <a class="link-light small" href="#!">Terms</a>
                        <span class="text-white mx-1">&middot;</span>
                        <a class="link-light small" href="#!">Contact</a>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
    </body>
</html>