김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
c459f34a 1 parent 6bba7932

구글지도 적용 및 관광정보 API 적용과 파싱을 완료함

Inline Side-by-side
Showing 2 changed files with 75 additions and 27 deletions
...@@ -50,7 +50,6 @@ td { ...@@ -50,7 +50,6 @@ td {
50 font-size: 8pt; 50 font-size: 8pt;
51 } 51 }
52 #map { 52 #map {
53 - width: 100%;
54 height: 400px; 53 height: 400px;
55 - background-color: grey; 54 + width: 100%;
56 -} 55 + }
......
...@@ -3,54 +3,103 @@ ...@@ -3,54 +3,103 @@
3 <title><%= title %></title> 3 <title><%= title %></title>
4 <link rel='stylesheet' href='/stylesheets/style.css'/> 4 <link rel='stylesheet' href='/stylesheets/style.css'/>
5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 - </head> 6 + <script>
7 - <body> 7 +
8 + requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
9 + requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
8 10
9 - <script> 11 + resultObject = new Array();
10 12
11 $(document).ready(function() { 13 $(document).ready(function() {
12 $('.sidenav').hide(); 14 $('.sidenav').hide();
13 -
14 $('#show').click(function() { 15 $('#show').click(function() {
15 - 16 + $('.sidenav').slideToggle("fast");
16 - $('.sidenav').slideToggle("fast");
17 }); 17 });
18 - });
19 -
20 -
21 - </script>
22 -
23 -
24 -
25 18
19 + if("geolocation" in navigator) {
20 + navigator.geolocation.getCurrentPosition(function(position) {
21 + findShops(position.coords.latitude, position.coords.longitude);
22 + initMap(position.coords.latitude, position.coords.longitude);
23 + });
24 + } else {
25 +
26 + }
27 +
28 + function findShops(latitude, longitude) {
29 +
30 + //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
31 + pageIndex = 1;
32 + var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
33 + $.ajax({
34 + type: "GET"
35 + ,dataType: "xml"
36 + ,url: requestUrl + parameter
37 + ,success: function(xml){
38 + totalCount = Number($(xml).find("totalCount").text());
39 + for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
40 + {
41 + $.ajax({
42 + type: "GET"
43 + ,dataType: "xml"
44 + ,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
45 + ,success: function(xml){
46 + var xmlData = $(xml).find("items item");
47 + var listLength = xmlData.length;
48 + if (listLength) {
49 + $(xmlData).each(function(){
50 + var data = new Object() ;
51 + data.title = $(this).find("title").text()
52 + data.lng = $(this).find("mapx").text()
53 + data.lat = $(this).find("mapy").text()
54 + resultObject.push(data);
55 + });
56 + }
57 + }
58 + });
59 + }
60 + }
61 + });
62 + }
63 +
64 +
65 + });
66 +
67 + function initMap(latitude, longitude) {
68 + var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
69 + var map = new google.maps.Map(document.getElementById('map'), {
70 + zoom: 4,
71 + center: position
72 + });
73 + var markers = resultObject.map(function(location, i) {
74 + console.log(location)
75 + return new google.maps.Marker({
76 + position: location,
77 + label: labels[i % labels.length]
78 + });
79 + });
80 + }
81 + </script>
82 + </head>
83 + <body>
26 <div id ="menu"> 84 <div id ="menu">
27 <div id ="show">clickmenu</div> 85 <div id ="show">clickmenu</div>
28 -
29 <ul class="sidenav"> 86 <ul class="sidenav">
30 <li><a class="active" href="home">home</a></li> 87 <li><a class="active" href="home">home</a></li>
31 <li><a href="map">맛집도장찍기</a></li> 88 <li><a href="map">맛집도장찍기</a></li>
32 <li><a href="mybook">견문록확인</a></li> 89 <li><a href="mybook">견문록확인</a></li>
33 -
34 </ul> 90 </ul>
35 -
36 -
37 </div> 91 </div>
38 92
39 -
40 <div id = "header"> </div> 93 <div id = "header"> </div>
41 94
42 <div id ="content"> 95 <div id ="content">
43 - 96 + <div id="map"></div>
44 - <h1>구글지도보기</h1> 97 + <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&callback=initMap"></script>
45 - 탐방한 맛집을 클릭하면 쿠폰북에 기록됩니다
46 98
47 </div> 99 </div>
48 100
49 <div id ="footer"></div> 101 <div id ="footer"></div>
50 102
51 -
52 -
53 -
54 </body> 103 </body>
55 104
56 </html> 105 </html>
......