김재현 / 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 {
font-size: 8pt;
}
#map {
width: 100%;
height: 400px;
background-color: grey;
}
width: 100%;
}
......
......@@ -3,54 +3,103 @@
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
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"
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"
<script>
resultObject = new Array();
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
$('.sidenav').slideToggle("fast");
});
});
</script>
if("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
findShops(position.coords.latitude, position.coords.longitude);
initMap(position.coords.latitude, position.coords.longitude);
});
} else {
}
function findShops(latitude, longitude) {
//var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
pageIndex = 1;
var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + parameter
,success: function(xml){
totalCount = Number($(xml).find("totalCount").text());
for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
{
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
,success: function(xml){
var xmlData = $(xml).find("items item");
var listLength = xmlData.length;
if (listLength) {
$(xmlData).each(function(){
var data = new Object() ;
data.title = $(this).find("title").text()
data.lng = $(this).find("mapx").text()
data.lat = $(this).find("mapy").text()
resultObject.push(data);
});
}
}
});
}
}
});
}
});
function initMap(latitude, longitude) {
var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: position
});
var markers = resultObject.map(function(location, i) {
console.log(location)
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
}
</script>
</head>
<body>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id ="content">
<h1>구글지도보기</h1>
탐방한 맛집을 클릭하면 쿠폰북에 기록됩니다
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&callback=initMap"></script>
</div>
<div id ="footer"></div>
</body>
</html>
......