Heo

예외처리

......@@ -3,10 +3,14 @@ var bodyParser = require('body-parser');
var request = require('request');
var cheerio = require('cheerio');
var app =express();
app.set('view engine','ejs');
app.set('views','./views')
app.use(express.urlencoded( {extended : false } ));
app.locals.pretty=true;
app.set('views','./views')
app.set('view engine','pug');
// app.set('view engine','pug');
app.use(express.static('public'));
var http = require('http');
var fs = require('fs');
......@@ -26,7 +30,7 @@ app.post('/',function(req,res,next){
request($api_url,function(err,response,body){
if(err) throw err;
// console.log(body);
//data부분만 추출
var obj = JSON.parse(body).data;
// console.log(obj);
......@@ -37,25 +41,27 @@ app.post('/',function(req,res,next){
// console.log(searchList);
//result라는 변수에 담아 결과 보내기
res.render('main', {result:searchList });
var hey = searchList[0].orgZipaddr.split(',');
res.render('index', {result:JSON.stringify(searchList) });
})
})
app.get('/',function(req,res){
res.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./map/kakaomap.html', null, function(err,data){
if(err){
res.writeHead(404);
res.write('error');
}
else{
console.log('complete!');
res.write(data);
}
res.end();
});
res.render('index');
// res.writeHead(200, {'Content-Type': 'text/html'});
// fs.readFile('./map/kakaomap.html', null, function(err,data){
// if(err){
// res.writeHead(404);
// res.write('error');
// }
// else{
// console.log('complete!');
// res.write(data);
// }
// res.end();
// });
})
app.listen(3000,function(){
......
......@@ -12,6 +12,7 @@
"@google/maps": "^1.1.3",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.9",
"ejs": "^3.1.6",
"express": "^4.17.1",
"pug": "^3.0.2",
"request": "^2.88.2",
......
......@@ -6,6 +6,7 @@
</head>
<body>
<h1>COVID-19 의료기관 검색하기</h1>
<form action="/" method="post">
<p>
......@@ -13,70 +14,74 @@
<input type="submit"/>
</p>
</form>
<div id="map" style="width:700px;height:400px;"></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = [
{
content: '<div>카카오</div>',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
content: '<div>생태연못</div>',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
content: '<div>텃밭</div>',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
content: '<div>근린공원</div>',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
<div id="map" style="width:700px;height:400px;"></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
<% if(typeof(result) != "undefined"){ %>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var listData = "<%= result %>";
listData = listData.replaceAll('&#34;','\"');
listData = JSON.parse(listData);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
console.log(listData);
// console.log(listData[1]);
//입력되는 배열명이 listData로 들어오면 됨.
listData.forEach(function(addr, index) {
var tmpaddr = ((addr.orgZipaddr).split(','))[0];
console.log(tmpaddr);
console.log("h");
geocoder.addressSearch(tmpaddr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
var marker = new kakao.maps.Marker({
position: coords,
clickable: true});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
<% } %>
</body>
</html>
\ No newline at end of file
......