김재웅 / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
29e793ee 1 parent a5482ec9

design interface

Inline Side-by-side
Showing 11 changed files with 358 additions and 66 deletions
1 <script> 1 <script>
2 import Menu from './Menu.svelte' 2 import Menu from './Menu.svelte'
3 - import Backtotop from './Backtotop.svelte' 3 + import Backtotop from './Side/Backtotop.svelte'
4 import Map from './Map.svelte' 4 import Map from './Map.svelte'
5 import Article from './Articles.svelte' 5 import Article from './Articles.svelte'
6 + import Festalist from './Side/Festalist.svelte';
7 + import Areaset from './Side/Areaset.svelte';
6 </script> 8 </script>
7 9
8 <style> 10 <style>
...@@ -15,6 +17,10 @@ ...@@ -15,6 +17,10 @@
15 :global(body) { 17 :global(body) {
16 padding: 0; 18 padding: 0;
17 margin: 0; 19 margin: 0;
20 + align-items: center;
21 + align-content: center;
22 + text-align: center;
23 + justify-content: center;
18 } 24 }
19 25
20 :global(html) { 26 :global(html) {
...@@ -25,6 +31,8 @@ ...@@ -25,6 +31,8 @@
25 31
26 <div> 32 <div>
27 <Menu/> 33 <Menu/>
34 + <Festalist/>
35 + <Areaset/>
28 <Map/> 36 <Map/>
29 <Backtotop/> 37 <Backtotop/>
30 <Article/> 38 <Article/>
......
...@@ -8,63 +8,83 @@ ...@@ -8,63 +8,83 @@
8 } 8 }
9 9
10 #map { 10 #map {
11 + margin-top: 50px;
11 box-sizing: border-box; 12 box-sizing: border-box;
12 display: flex; 13 display: flex;
13 - height: 90vh; 14 + height: 80vh;
14 - width: 80vw; 15 + width: 60vw;
15 background-color:#edeff2; 16 background-color:#edeff2;
17 + border-radius: 10px;
18 + border: 1px solid black;
19 + box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
16 } 20 }
17 </style> 21 </style>
18 22
19 <script> 23 <script>
20 import jQuery from 'jquery'; 24 import jQuery from 'jquery';
25 + import Info from './Side/Info.svelte';
21 26
22 - var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
23 var {kakao} = window; 27 var {kakao} = window;
24 -
25 var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json"; 28 var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
26 - jQuery.getJSON(url,function(data){
27 - console.log(data);
28 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
29 - mapOption = {
30 - center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
31 - level: 12, // 지도의 확대 레벨
32 - mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
33 - };
34 29
35 - var markers= []; 30 + let ShowInfo = false;
36 - // 지도를 생성한다 31 + let Festa = {};
37 - var map = new kakao.maps.Map(mapContainer, mapOption); 32 + var markers= [];
38 - for(var i = 0; i<data.response.body.items.item.length;i++){ 33 + var map;
34 +
35 + function createMap() {
36 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
37 + mapOption = {
38 + center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
39 + level: 12, // 지도의 확대 레벨
40 + mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
41 + };
42 +
43 + markers= [];
44 + map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도
45 +
46 + // 임시로 관광공사에서 JSON 직접 불러와서 하는 중
47 + jQuery.getJSON(url, (json) => {drawMarkers( json.response.body.items.item )});
48 + }
49 +
50 +
51 + function drawMarkers (data) {
52 + let len = data.length >= 9 ? 9 : data.length;
53 +
54 + for(var i = 0; i < len; i++){
39 // 지도에 마커를 생성하고 표시한다 55 // 지도에 마커를 생성하고 표시한다
40 - var marker = new kakao.maps.Marker({ 56 + let marker = new kakao.maps.Marker({
41 - position: new kakao.maps.LatLng(data.response.body.items.item[i].mapy, data.response.body.items.item[i].mapx), // 마커의 좌표 57 + position: new kakao.maps.LatLng(data[i].mapy, data[i].mapx), // 마커의 좌표
42 map: map // 마커를 표시할 지도 객체 58 map: map // 마커를 표시할 지도 객체
43 }); 59 });
60 +
44 markers.push(marker); 61 markers.push(marker);
45 - // 마커 위에 표시할 인포윈도우를 생성한다
46 62
63 + // 마커 클릭 시 이벤트
64 + let showInfo = function(festa) {
65 + return function() {
66 + Festa = festa;
67 + ShowInfo = true;
68 + console.log(Festa);
69 + }
70 + };
71 +
72 + kakao.maps.event.addListener(markers[i], 'click', showInfo(data[i]));
47 }; 73 };
48 74
75 + // 마커 위에 표시할 인포윈도우를 생성한다
49 for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ 76 for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ
50 - var infowindow = new kakao.maps.InfoWindow({ 77 + let infowindow = new kakao.maps.InfoWindow({
51 - content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용 78 + content : '<div style="padding:5px;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
52 }); 79 });
53 infowindow.open(map, markers[i]); 80 infowindow.open(map, markers[i]);
54 } 81 }
55 - 82 + }
56 - // 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소를 막는다
57 - map.setZoomable(false);
58 -
59 - // 지도에 확대 축소 컨트롤을 생성한다
60 - var zoomControl = new kakao.maps.ZoomControl();
61 -
62 - // 지도의 우측에 확대 축소 컨트롤을 추가한다
63 - map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
64 -
65 - });
66 </script> 83 </script>
67 84
85 +<svelte:window on:load={createMap}></svelte:window>
86 +
87 +<Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
68 <div id="map_bg"> 88 <div id="map_bg">
69 <div id="map"></div> 89 <div id="map"></div>
70 </div> 90 </div>
......
...@@ -12,45 +12,47 @@ ...@@ -12,45 +12,47 @@
12 12
13 <style> 13 <style>
14 nav { 14 nav {
15 - background-color: #4527a0; 15 + background-color: #edeff2;
16 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 16 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
17 height: 70px; 17 height: 70px;
18 + /* width: 50vw; */
18 top: 0; 19 top: 0;
19 } 20 }
20 21
21 .inner { 22 .inner {
22 - max-width: 500px; 23 + max-width: 600px;
23 padding-left: 10px; 24 padding-left: 10px;
24 padding-right: 10px; 25 padding-right: 10px;
25 margin: auto; 26 margin: auto;
26 - box-sizing: border-box; 27 + box-sizing: content-box;
27 display: flex; 28 display: flex;
28 align-items: center; 29 align-items: center;
30 + justify-content: center;
29 height: 100%; 31 height: 100%;
30 } 32 }
31 33
32 .logo { 34 .logo {
33 display: flex; 35 display: flex;
34 - position: absolute; 36 + align-items: center;
35 - color: white; 37 + color: black;
36 width: 50px; 38 width: 50px;
37 - left: 40px; 39 + margin-right: 350px;
38 - top: 25px
39 } 40 }
40 41
41 .navbar-list { 42 .navbar-list {
42 display: flex; 43 display: flex;
43 padding: 0; 44 padding: 0;
44 - width: 100%; 45 + width: 400px;
45 - justify-content: space-between; 46 + justify-content: space-around;
46 margin: 0; 47 margin: 0;
48 + margin-left: 200px;
47 } 49 }
48 </style> 50 </style>
49 51
50 -<nav> 52 +<nav id="nav">
51 - <div class="logo">Logo</div>
52 <div class="inner"> 53 <div class="inner">
53 - <ul class='navbar-list'> 54 + <div class="logo">Logo</div>
55 + <ul class='navbar-list'>
54 {#each navItems as item} 56 {#each navItems as item}
55 <Menuitems {item}/> 57 <Menuitems {item}/>
56 {/each} 58 {/each}
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 li { 2 li {
3 list-style-type: none; 3 list-style-type: none;
4 position: relative; 4 position: relative;
5 + margin-left: 50px;
5 } 6 }
6 7
7 li:before { 8 li:before {
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
14 } 15 }
15 16
16 a { 17 a {
17 - color: #e5e6e5; 18 + color: #000000;
18 text-decoration: none; 19 text-decoration: none;
19 display: inline-flex; 20 display: inline-flex;
20 height: 45px; 21 height: 45px;
......
1 +<script>
2 + import { fly } from 'svelte/transition'
3 + import SideBar from './SideBar.svelte';
4 + let show = true;
5 + let sidebar_show = false;
6 +
7 + function showBar() {
8 + sidebar_show = !sidebar_show;
9 + }
10 +
11 + function hide() {
12 + if (window.scrollY < 400) {
13 + show = true
14 + } else {
15 + show = false
16 + }
17 + }
18 +
19 +</script>
20 +
21 +<style>
22 + .sidebtn {
23 + border-radius: 5px;
24 + border: 0px;
25 + width: 70px;
26 + height: 70px;
27 + position: fixed;
28 + left: -20px;
29 + top: 18.5%;
30 + padding-right: 10px;
31 + text-align: right;
32 + background-color: #b71c1c;
33 + color: #ffffff;
34 + }
35 +
36 + .sidebtn:focus {
37 + background-color: #ef5350;
38 + }
39 +
40 + .sidebtn:hover {
41 + background-color: #d32f2f;
42 + }
43 +
44 +</style>
45 +
46 +<svelte:window on:scroll={hide}></svelte:window>
47 +
48 +{#if (show)}
49 + <button class="sidebtn"
50 + transition:fly="{{ x : -50, duration : 400}}"
51 + on:click={showBar}>
52 + 지역<br>선택
53 + </button>
54 + <SideBar bind:show={sidebar_show}>
55 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
56 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
57 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
58 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
59 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
60 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
61 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
62 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
63 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
64 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
65 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
66 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
67 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
68 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
69 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
70 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
71 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
72 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
73 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
74 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
75 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
76 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
77 + 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
78 + </SideBar>
79 +{/if}
...\ No newline at end of file ...\ No newline at end of file
1 <script> 1 <script>
2 import { fly } from 'svelte/transition' 2 import { fly } from 'svelte/transition'
3 - import { onMount, onDestroy } from 'svelte';
4 let show = false; 3 let show = false;
5 4
6 function scrollUp() { 5 function scrollUp() {
7 document.body.scrollIntoView({behavior: "smooth"}) 6 document.body.scrollIntoView({behavior: "smooth"})
8 } 7 }
9 8
10 - onMount(() => { 9 + function hide() {
11 - window.onscroll = () => { 10 + if (window.scrollY > 60) {
12 - if (window.scrollY > 60) { 11 + show = true
13 - show = true 12 + } else {
14 - } else { 13 + show = false
15 - show = false
16 - }
17 } 14 }
18 - }); 15 + }
19 -
20 - onDestroy(() => {
21 - window.onscroll = () => {}
22 - });
23 </script> 16 </script>
24 17
25 <style> 18 <style>
...@@ -34,6 +27,8 @@ ...@@ -34,6 +27,8 @@
34 27
35 </style> 28 </style>
36 29
30 +<svelte:window on:scroll={hide}></svelte:window>
31 +
37 {#if (show)} 32 {#if (show)}
38 <button id="backtotop" 33 <button id="backtotop"
39 transition:fly="{{ y : 200, duration:400}}" 34 transition:fly="{{ y : 200, duration:400}}"
......
1 +<script>
2 + import { fly } from 'svelte/transition'
3 + import SideBar from './SideBar.svelte';
4 + let show = true;
5 + let sidebar_show = false;
6 +
7 + function showBar() {
8 + sidebar_show = !sidebar_show;
9 + }
10 +
11 + function hide() {
12 + if (window.scrollY < 400) {
13 + show = true
14 + } else {
15 + show = false
16 + }
17 + }
18 +
19 +</script>
20 +
21 +<style>
22 + .sidebtn {
23 + border-radius: 5px;
24 + border: 0px;
25 + width: 70px;
26 + height: 70px;
27 + position: fixed;
28 + left: -20px;
29 + top: 10%;
30 + padding-right: 10px;
31 + text-align: right;
32 + background-color: #e65100;
33 + color: #ffffff;
34 + }
35 +
36 + .sidebtn:focus {
37 + background-color: #f57c00;
38 + }
39 +
40 + .sidebtn:hover {
41 + background-color: #ef6c00;
42 + }
43 +
44 +</style>
45 +
46 +<svelte:window on:scroll={hide}></svelte:window>
47 +
48 +{#if (show)}
49 + <button class="sidebtn"
50 + transition:fly="{{ x : -50, duration : 400}}"
51 + on:click={showBar}>
52 + 행사<br>목록
53 + </button>
54 + <SideBar bind:show={sidebar_show}>행사목록!</SideBar>
55 +{/if}
...\ No newline at end of file ...\ No newline at end of file
1 +<script>
2 + import SideBar from "./SideBar.svelte"
3 +
4 + export let festa;
5 + export let sidebar_show = false;
6 + let side = "right";
7 +
8 + function showBar() {
9 + sidebar_show = !sidebar_show;
10 + }
11 +</script>
12 +
13 +
14 +<SideBar bind:show={sidebar_show} {side}>
15 + {festa.title}
16 +</SideBar>
1 +<script>
2 + import { fly } from 'svelte/transition';
3 +
4 + export let show = true;
5 + export let side = "left";
6 + </script>
7 +
8 +<style>
9 + .nav {
10 + overflow-y: auto;
11 + }
12 +
13 + .left {
14 + position: fixed;
15 + top: 0;
16 + left: 0;
17 + height: 100%;
18 + /* padding: 2rem 1rem 0.6rem; */
19 + border-right: 1px solid #aaa;
20 + background: #fff;
21 + overflow-y: auto;
22 + width: 330px;
23 + z-index: 900;
24 + }
25 +
26 + .right {
27 + position: fixed;
28 + top: 0;
29 + right: 0;
30 + height: 100%;
31 + padding: 2rem 1rem 0.6rem;
32 + border-left: 1px solid #aaa;
33 + background: #fff;
34 + overflow-y: auto;
35 + width: 330px;
36 + z-index: 900;
37 + }
38 +
39 + .background {
40 + position: fixed;
41 + top: 0;
42 + left: 0;
43 + width: 100%;
44 + height: 100%;
45 + z-index: 700;
46 + }
47 +
48 +</style>
49 +
50 +{#if show}
51 + <div class="background" on:click={() => {show = false;}}></div>
52 + <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
53 + <slot>
54 + </slot>
55 + </nav>
56 +{/if}
...\ No newline at end of file ...\ No newline at end of file
1 +export let district = {
2 + "name": "korea-administrative-district",
3 + "version": "20160125",
4 + "url": "https://github.com/cosmosfarm/korea-administrative-district",
5 + "data":[
6 + {"서울특별시":[
7 + "종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"
8 + ]},
9 + {"부산광역시":[
10 + "중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"
11 + ]},
12 + {"인천광역시":[
13 + "중구", "동구", "남구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"
14 + ]},
15 + {"대구광역시":[
16 + "중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군"
17 + ]},
18 + {"광주광역시":[
19 + "동구", "서구", "남구", "북구", "광산구"
20 + ]},
21 + {"대전광역시":[
22 + "동구", "중구", "서구", "유성구", "대덕구"
23 + ]},
24 + {"울산광역시":[
25 + "중구", "남구", "동구", "북구", "울주군"
26 + ]},
27 + {"세종특별자치시":[
28 +
29 + ]},
30 + {"경기도":[
31 + "가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"
32 + ]},
33 + {"강원도":[
34 + "원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"
35 + ]},
36 + {"충청북도":[
37 + "청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"
38 + ]},
39 + {"충청남도":[
40 + "천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"
41 + ]},
42 + {"경상북도":[
43 + "포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"
44 + ]},
45 + {"경상남도":[
46 + "창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"
47 + ]},
48 + {"전라북도":[
49 + "전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"
50 + ]},
51 + {"전라남도":[
52 + "여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"
53 + ]},
54 + {"제주특별자치도":[
55 + "제주시", "서귀포시"
56 + ]}
57 + ]
58 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -21,8 +21,9 @@ ...@@ -21,8 +21,9 @@
21 mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 21 mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
22 }; 22 };
23 23
24 - var markers= []; 24 + var markers= [];
25 // 지도를 생성한다 25 // 지도를 생성한다
26 + console.log(data.response.body.items.item.length);
26 var map = new kakao.maps.Map(mapContainer, mapOption); 27 var map = new kakao.maps.Map(mapContainer, mapOption);
27 for(var i = 0; i<data.response.body.items.item.length;i++){ 28 for(var i = 0; i<data.response.body.items.item.length;i++){
28 // 지도에 마커를 생성하고 표시한다 29 // 지도에 마커를 생성하고 표시한다
...@@ -33,12 +34,13 @@ ...@@ -33,12 +34,13 @@
33 markers.push(marker); 34 markers.push(marker);
34 // 마커 위에 표시할 인포윈도우를 생성한다 35 // 마커 위에 표시할 인포윈도우를 생성한다
35 36
36 - }; 37 + };
37 - for(var i = 0; i<9;i++){ // 왜 9까지 밖에 안되누 ㅠㅠ 38 +
38 - var infowindow = new kakao.maps.InfoWindow({ 39 + for(var i = 0; i<data.response.body.items.item.length;i++){ // 왜 9까지 밖에 안되누 ㅠㅠ
39 - content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용 40 + var infowindow = new kakao.maps.InfoWindow({
40 - }); 41 + content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
41 - infowindow.open(map, markers[i]); 42 + });
43 + infowindow.open(map, markers[i]);
42 } 44 }
43 }) 45 })
44 46
......