이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
748405a7 1 parent 5300e5e5

Backend: sql을 사용하여 map 개선

Expand all
Inline Side-by-side
Showing 5 changed files with 179 additions and 0 deletions
1 +// git Ignore 할것!!!!!!!!!!!!!!!!!!!!!!
2 +{
3 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
4 + "user":"root",
5 + "password": "dldbwp1207",
6 + "port": "3306",
7 + "database": "showdata"
8 +}
...\ No newline at end of file ...\ No newline at end of file
1 +//해당 아이디를 불러와서 lat lon 받아서 지도 출력
2 +//지도 생성
3 +//해당 위치 표시
4 +
5 +const fs = require('fs');
6 +const express = require('express');
7 +
8 +const data = fs.readFileSync('./showData.json');
9 +const conf = JSON.parse(data);
10 +const mysql = require('mysql');
11 +
12 +const connection = mysql.createConnection({
13 + host: conf.host,
14 + user: conf.user,
15 + password: conf.password,
16 + port: conf.port,
17 + database: conf.database
18 +});
19 +connection.connect(); //연결
20 +
21 +app.get('위치(에 접속한 경우 쿼리를 날려준다.)')
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>geolocation으로 마커 표시하기</title>
6 +
7 +</head>
8 +<body>
9 +<p style="margin-top:-12px">
10 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 +</p>
12 +<div id="map" style="width:500px;height:350px;"></div>
13 +
14 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
15 +<script>
16 +const near=require('study.js');
17 +
18 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
19 + mapOption = {
20 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
21 + level: 10 // 지도의 확대 레벨
22 + };
23 +
24 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
25 +
26 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
27 +if (navigator.geolocation) {
28 +
29 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
30 + navigator.geolocation.getCurrentPosition(function(position) {
31 +
32 + var lat = position.coords.latitude, // 위도
33 + lon = position.coords.longitude; // 경도
34 + console.log(lat);
35 + console.log(lon);
36 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
37 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
38 +
39 + // 마커와 인포윈도우를 표시합니다
40 + displayMarker(locPosition, message);
41 +
42 + });
43 +
44 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
45 +
46 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
47 + message = 'geolocation을 사용할수 없어요..'
48 +
49 + displayMarker(locPosition, message);
50 +}
51 +
52 +
53 +
54 +
55 +displayShows();
56 +function displayShows(){
57 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
58 + var near_list=near(lat,lon);
59 + var positions=[];
60 + for(var i =0;i<near_list.length;i++){
61 + positions.push({title: id,
62 + lating: new kaka0.maps.Lating(near_list[i][1],near_list[i][2])})
63 + }
64 +for (var i = 0; i < positions.length; i ++) {
65 +
66 + // 마커 이미지의 이미지 크기 입니다
67 + var imageSize = new kakao.maps.Size(24, 35);
68 +
69 + // 마커 이미지를 생성합니다
70 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
71 +
72 + // 마커를 생성합니다
73 + var marker = new kakao.maps.Marker({
74 + map: map, // 마커를 표시할 지도
75 + position: positions[i].latlng, // 마커를 표시할 위치
76 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
77 + image : markerImage // 마커 이미지
78 + });
79 + }
80 +}
81 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
82 +function displayMarker(locPosition, message) {
83 +
84 + // 마커를 생성합니다
85 + var marker = new kakao.maps.Marker({
86 + map: map,
87 + position: locPosition
88 + });
89 +
90 + var iwContent = message, // 인포윈도우에 표시할 내용
91 + iwRemoveable = true;
92 +
93 + // 인포윈도우를 생성합니다
94 + var infowindow = new kakao.maps.InfoWindow({
95 + content : iwContent,
96 + removable : iwRemoveable
97 + });
98 +
99 + // 인포윈도우를 마커위에 표시합니다
100 + infowindow.open(map, marker);
101 +
102 + // 지도 중심좌표를 접속위치로 변경합니다
103 + map.setCenter(locPosition);
104 +}
105 +</script>
106 +</body>
107 +</html>
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +var mysql = require('mysql');
2 +
3 +module.exports={
4 + nearShow: function(lat,lon){
5 + var near_show_list=[];
6 + var connection = mysql.createConnection({
7 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
8 + "user":"root",
9 + "password": "dldbwp1207",
10 + "port": "3306",
11 + "database": "showdata"
12 + });
13 +
14 + connection.connect();
15 + var dataNum=0;
16 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA',function(error,results,field){
17 + if(error){
18 + console.log(error);
19 + }
20 + console.log(results[0].cnt);
21 + dataNum=results[0].cnt;
22 + });
23 +
24 + connection.query('SELECT id,latitude,longitude FROM SHOW_DATA',function(error,results,field){
25 + if(error){
26 + console.log(error);
27 + }
28 + console.log([lat,lon]);
29 + for(var i=0;i<dataNum;i++){
30 + var latgap=(lat-results[i].latitude)*110;
31 + var longap=(lon-results[i].longitude)*91;
32 + var cal=latgap*latgap+longap*longap;
33 + if(cal<=1600){
34 + console.log(results[i].id);
35 + near_show_list.push([results[i].id,results[i].latitude,results[i].longitude]);
36 + }
37 + }
38 + });
39 +
40 + connection.end();
41 + return near_show_list;
42 + }
43 +}