김대철 / CafeRecommend

Go to a project
Toggle navigation Toggle navigation pinning
dckat
d94cbedc 1 parent 5f056929

지도에 카페 마커 표시하기 

feat, test: map.ejs 카페 테스트 데이터로 15개 지도에 띄우고 상세정보 표현
Expand all
Inline Side-by-side
Showing 7 changed files with 336 additions and 86 deletions
This diff is collapsed. Click to expand it.
......@@ -2,7 +2,7 @@ var express = require("express");
var router = express.Router();
var request = require("request");
var bodyParser=require('body-parser');
var bodyParser = require("body-parser");
var { OAuth2Client } = require("google-auth-library");
var querystring = require("querystring");
......@@ -10,11 +10,11 @@ var querystring = require("querystring");
var CLIENT_ID =
"94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";
var client = new OAuth2Client(CLIENT_ID);
var mysql=require('mysql')
var mysql = require("mysql");
var session = require("express-session");
var FileStore = require("session-file-store")(session);
router.use(bodyParser.urlencoded({extended:false})); //url인코딩 x
router.use(bodyParser.json()); //json방식으로 파
router.use(bodyParser.urlencoded({ extended: false })); //url인코딩 x
router.use(bodyParser.json()); //json방식으로 파
router.use(
session({
secret: "209", // 암호화
......@@ -24,10 +24,10 @@ router.use(
})
);
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'g79465',
database : 'caferecommend'
host: "localhost",
user: "root",
password: "g79465",
database: "caferecommend",
});
connection.connect();
/* GET home page. */
......@@ -59,22 +59,20 @@ router.post("/index", (req, res) => {
});
router.get("/login", checkAuthenticated, (req, res) => {
var sql = 'SELECT * FROM USER WHERE EMAIL=?';
var parameter=[req.session.user.email];
connection.query(sql,parameter, function(err, row){
if(err){
var sql = "SELECT * FROM USER WHERE EMAIL=?";
var parameter = [req.session.user.email];
connection.query(sql, parameter, function (err, row) {
if (err) {
console.log(err);
}
else {
} else {
if (row.length > 0) {
console.log("이미 가입이 되어있는 아이디")
console.log("이미 가입이 되어있는 아이디");
req.session.user.nickname = row[0].NICKNAME;
req.session.user.age = row[0].AGE;
req.session.user.gender = row[0].GENDER;
return res.render('map', {user : req.session.user})
}
else{
return res.render("login", { user: req.session.user, message:'none' });
return res.render("map", { user: req.session.user });
} else {
return res.render("login", { user: req.session.user, message: "none" });
}
}
});
......@@ -84,65 +82,42 @@ router.post("/login", (req, res) => {
console.log(req.body.nickname);
console.log(req.body.age);
console.log(req.body.gender);
var sql =' SELECT * FROM USER WHERE NICKNAME=?';
var parameter=[req.body.nickname];
connection.query(sql, parameter, function(err,row){
if(err){
console.log(err);
}
if(row.length>0){
console.log('동일 닉네임있음');
return res.render("login", {user : req.session.user, message: 'same nickname'});
}
else{
req.session.user.nickname=req.body.nickname;
req.session.user.age=req.body.age;
req.session.user.gender=req.body.gender;
var sql='INSERT INTO USER(EMAIL, NAME, NICKNAME, AGE, GENDER) VALUES(?,?,?,?,?)';
var parameter=[req.session.user.email, req.session.user.name, req.session.user.nickname, req.session.user.age, req.session.user.gender];
connection.query(sql, parameter, function(err, row){
if(err){
console.log(err);
}
else{
console.log("새로운 user데이터 입력");
}
});
return res.render("map", { user : req.session.user });
}
});
});
router.get("/cafe", (req, res) => {
let code = "CE7";
let encodedStr = querystring.escape(code);
let kakaoOptions = {
uri: `https://dapi.kakao.com/v2/local/search/category.json?category_group_code=${encodedStr}`,
method: "GET",
headers: {
Authorization: "KakaoAK 2f3999076db5d32db975ab9862a64480",
},
encoding: "utf-8",
};
request(kakaoOptions, callback);
function callback(error, res, body) {
console.log(body);
let kakaoPlaces = JSON.parse(body);
for (document of kakaoPlaces.documents) {
console.log(document.id);
console.log(document.place_name);
var sql = " SELECT * FROM USER WHERE NICKNAME=?";
var parameter = [req.body.nickname];
connection.query(sql, parameter, function (err, row) {
if (err) {
console.log(err);
}
}
return;
});
router.get("/map", (req, res) => {
res.render("map");
if (row.length > 0) {
console.log("동일 닉네임있음");
return res.render("login", {
user: req.session.user,
message: "same nickname",
});
} else {
req.session.user.nickname = req.body.nickname;
req.session.user.age = req.body.age;
req.session.user.gender = req.body.gender;
var sql =
"INSERT INTO USER(EMAIL, NAME, NICKNAME, AGE, GENDER) VALUES(?,?,?,?,?)";
var parameter = [
req.session.user.email,
req.session.user.name,
req.session.user.nickname,
req.session.user.age,
req.session.user.gender,
];
connection.query(sql, parameter, function (err, row) {
if (err) {
console.log(err);
} else {
console.log("새로운 user데이터 입력");
}
});
return res.render("map", { user: req.session.user });
}
});
});
module.exports = router;
......@@ -163,7 +138,7 @@ function checkAuthenticated(req, res, next) {
verify()
.then(() => {
req.session.user.name = user.name;
req.session.user.email=user.email;
req.session.user.email = user.email;
next();
})
.catch((err) => {
......@@ -172,12 +147,13 @@ function checkAuthenticated(req, res, next) {
}
router.get("/map", (req, res) => {
console.log(req.session.user);
if (req.session.user) {
res.render("map");
}
res.render("map");
});
router.get('/logout',function(req,res){
req.session.destroy(); //세션비우기
res.redirect('/');
router.get("/logout", function (req, res) {
req.session.destroy(); //세션비우기
res.redirect("/");
});
......
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621408098038}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338937349}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338737470}
\ No newline at end of file
{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621337475210}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>KaKao Map</title>
<link rel="stylesheet" href="/stylesheets/style.css" />
<title>Cafe Map</title>
<style>
.map_wrap,
.map_wrap * {
margin: 0;
padding: 0;
font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
font-size: 12px;
}
.map_wrap {
position: relative;
width: 100%;
height: 350px;
}
#category {
position: absolute;
top: 10px;
left: 10px;
border-radius: 5px;
border: 1px solid #909090;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
background: #fff;
overflow: hidden;
z-index: 2;
}
#category li {
float: left;
list-style: none;
width: 50px;
border-right: 1px solid #acacac;
padding: 6px 0;
text-align: center;
cursor: pointer;
}
#category li.on {
background: #eee;
}
#category li:hover {
background: #ffe6e6;
border-left: 1px solid #acacac;
margin-left: -1px;
}
#category li:last-child {
margin-right: 0;
border-right: 0;
}
#category li span {
display: block;
margin: 0 auto 3px;
width: 27px;
height: 28px;
}
#category li .category_bg {
background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png)
no-repeat;
}
#category li .bank {
background-position: -10px 0;
}
#category li .mart {
background-position: -10px -36px;
}
#category li .pharmacy {
background-position: -10px -72px;
}
#category li .oil {
background-position: -10px -108px;
}
#category li .cafe {
background-position: -10px -144px;
}
#category li .store {
background-position: -10px -180px;
}
#category li.on .category_bg {
background-position-x: -46px;
}
.placeinfo_wrap {
position: absolute;
bottom: 28px;
left: -150px;
width: 300px;
}
.placeinfo {
position: relative;
width: 100%;
border-radius: 6px;
border: 1px solid #ccc;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
background: #fff;
}
.placeinfo:nth-of-type(n) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.placeinfo_wrap .after {
content: "";
position: relative;
margin-left: -12px;
left: 50%;
width: 22px;
height: 12px;
background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
.placeinfo a,
.placeinfo a:hover,
.placeinfo a:active {
color: #fff;
text-decoration: none;
}
.placeinfo a,
.placeinfo span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.placeinfo span {
margin: 5px 5px 0 5px;
cursor: default;
font-size: 13px;
}
.placeinfo .title {
font-weight: bold;
font-size: 14px;
border-radius: 6px 6px 0 0;
margin: -1px -1px 0 -1px;
padding: 10px;
color: #fff;
background: #d95050;
background: #d95050
url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png)
no-repeat right 14px center;
}
.placeinfo .tel {
color: #0f7833;
}
.placeinfo .jibun {
color: #999;
font-size: 11px;
margin-top: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 575px"></div>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
></script>
<script>
var lat = "";
var lon = "";
var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
var contentNode = document.createElement("div");
var markers = [];
var currCategory = "CE7"; // 카테고리코드: 카페
var order = 1;
var mapContainer = document.getElementById("map"),
mapOption = {
center: new kakao.maps.LatLng(36.2477502, 127.078164),
......@@ -23,6 +171,26 @@
var map = new kakao.maps.Map(mapContainer, mapOption);
var ps = new kakao.maps.services.Places(map);
kakao.maps.event.addListener(map, "idle", searchPlaces);
contentNode.className = "placeinfo_wrap";
addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
placeOverlay.setContent(contentNode);
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
} else {
target.attachEvent("on" + type, callback);
}
}
placeOverlay.setContent(contentNode);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
......@@ -41,6 +209,108 @@
function displayCurrentPosition(locPosition) {
map.setCenter(locPosition);
}
kakao.maps.event.addListener(map, "idle", searchPlaces);
function searchPlaces() {
if (!currCategory) {
return;
}
placeOverlay.setMap(null);
ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
}
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
}
}
function displayPlaces(places) {
for (var i = 0; i < places.length; i++) {
var marker = addMarker(
new kakao.maps.LatLng(places[i].y, places[i].x),
order
);
(function (marker, place) {
kakao.maps.event.addListener(marker, "click", function () {
displayPlaceInfo(place);
});
})(marker, places[i]);
}
}
function addMarker(position, order) {
var imageSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
var imageSize = new kakao.maps.Size(27, 30);
var imgOptions = {
spriteSize: new kakao.maps.Size(72, 220),
spriteOrigin: new kakao.maps.Point(46, 150),
offset: new kakao.maps.Point(11, 28),
};
var markerImage = new kakao.maps.MarkerImage(
imageSrc,
imageSize,
imgOptions
);
var marker = new kakao.maps.Marker({
position: position,
image: markerImage,
});
marker.setMap(map);
markers.push(marker);
return marker;
}
function displayPlaceInfo(place) {
var content =
'<div class="placeinfo">' +
' <a class="title" href="' +
place.place_url +
'" target="_blank" title="' +
place.place_name +
'">' +
place.place_name +
"</a>";
if (place.road_address_name) {
content +=
' <span title="' +
place.road_address_name +
'">' +
place.road_address_name +
"</span>" +
' <span class="jibun" title="' +
place.address_name +
'">(지번 : ' +
place.address_name +
")</span>";
} else {
content +=
' <span title="' +
place.address_name +
'">' +
place.address_name +
"</span>";
}
content +=
' <span class="tel">' +
place.phone +
"</span>" +
"</div>" +
'<div class="after"></div>';
contentNode.innerHTML = content;
placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
placeOverlay.setMap(map);
}
</script>
</body>
</html>
......