이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
45d341fd 1 parent 748405a7

sql 적용 카카오맵 마킹 테스트

Expand all
Inline Side-by-side
Showing 7 changed files with 225 additions and 53 deletions
......@@ -5,6 +5,7 @@ const app = express();
//화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함.
var mainRouter = require('./routes') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌)
var loginRouter = require('./routes/login')
var NearContentRouter = require('./routes/database')
//디폴트 포트 값 : 8000
app.set('port', process.env.PORT || 8000);
......@@ -16,15 +17,15 @@ app.engine('html', require('ejs').renderFile);
//각각의 요청에서 router 호출해서 page를 전환함.
app.use('/', mainRouter);
app.use('/login', loginRouter);
// app.use('/map', NearContentRouter);
//css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
app.use(express.static(path.join(__dirname, 'public')));
app.get('/logout', function (req, res) {
res.send("Logout success");
});
// app.get('/logout', function (req, res) {
// res.send("Logout success");
// });
app.listen(app.get('port'), () => {
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
const near=require('study.js');
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
const near = require('study.js');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
......@@ -38,30 +41,31 @@ if (navigator.geolocation) {
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
}
displayShows();
function displayShows(){
displayShows();
function displayShows() {
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var near_list=near(lat,lon);
var positions=[];
for(var i =0;i<near_list.length;i++){
positions.push({title: id,
lating: new kaka0.maps.Lating(near_list[i][1],near_list[i][2])})
var near_list = near(lat, lon);
var positions = [];
for (var i = 0; i < near_list.length; i++) {
positions.push({
title: id,
lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
})
}
for (var i = 0; i < positions.length; i ++) {
for (var i = 0; i < positions.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
......@@ -73,13 +77,13 @@ for (var i = 0; i < positions.length; i ++) {
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
......@@ -92,8 +96,8 @@ function displayMarker(locPosition, message) {
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
content: iwContent,
removable: iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
......@@ -101,7 +105,8 @@ function displayMarker(locPosition, message) {
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
}
</script>
</body>
</html>
\ No newline at end of file
......
var mysql = require('mysql');
module.exports={
nearShow: function(lat,lon){
var near_show_list=[];
module.exports = {
nearShow: function (lat, lon) {
var near_show_list = [];
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user":"root",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
});
connection.connect();
var dataNum=0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA',function(error,results,field){
if(error){
var dataNum = 0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum=results[0].cnt;
dataNum = results[0].cnt;
});
connection.query('SELECT id,latitude,longitude FROM SHOW_DATA',function(error,results,field){
if(error){
connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log([lat,lon]);
for(var i=0;i<dataNum;i++){
var latgap=(lat-results[i].latitude)*110;
var longap=(lon-results[i].longitude)*91;
var cal=latgap*latgap+longap*longap;
if(cal<=1600){
console.log([lat, lon]);
for (var i = 0; i < dataNum; i++) {
var latgap = (lat - results[i].latitude) * 110;
var longap = (lon - results[i].longitude) * 91;
var cal = latgap * latgap + longap * longap;
//내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
if (cal <= 1600) {
console.log(results[i].id);
near_show_list.push([results[i].id,results[i].latitude,results[i].longitude]);
near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
}
}
});
......
This diff is collapsed. Click to expand it.
var mysql = require('mysql');
module.exports = {
init: function (lat, lon) {
var near_show_list = [];
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
});
connection.connect();
var dataNum = 0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum = results[0].cnt;
});
connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log([lat, lon]);
for (var i = 0; i < dataNum; i++) {
var latgap = (lat - results[i].latitude) * 110;
var longap = (lon - results[i].longitude) * 91;
var cal = latgap * latgap + longap * longap;
//내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
if (cal <= 1600) {
console.log(results[i].id);
near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
}
}
});
connection.end();
// return near_show_list;
}
}
......@@ -9,7 +9,14 @@ router.get('/', function (req, res, next) {
/* GET home page. */
router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login1' });
res.render('login.html', { title: 'Login' });
console.log('로그인 페이지 접속 성공');
});
/* GET home page. */
router.get('/map', function (req, res, next) {
res.render('map_sql.html');
console.log('현위치 기반 content 마킹 성공');
});
module.exports = router;
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
const near = require('database.js');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
console.log(lat);
console.log(lon);
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
displayShows();
function displayShows() {
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var near_list = near(lat, lon);
var positions = [];
for (var i = 0; i < near_list.length; i++) {
positions.push({
title: id,
lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
})
}
for (var i = 0; i < positions.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable: iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file