유현수 / coin_karaoke

Go to a project
Toggle navigation Toggle navigation pinning
유현수
7ce26cce 1 parent 3701c1c3

second html folder

Inline Side-by-side
Showing 3 changed files with 124 additions and 41 deletions
......@@ -9,11 +9,8 @@
<meta name = "author" content = "Hyun Soo Yoo">
<style>
div{
height: 100vh;
background-image: url('C:/Users/user/Documents/coinkaraoke/css/Sing.jpg');
background-repeat : no-repeat;
background-size : cover;
body {
background-color : background-color: rgb(1, 255, 200);
}
#title_message{
......@@ -40,14 +37,12 @@
<title>Coin_Karaoke</title>
<!-- <link rel="stylesheet" href="css/coin.css" type="text/css">-->
<!-- link x -->
</head>
<body>
<H1 id = "title_message">
<center>코인 노래방 검색창</center>
<center>경기 남부 코인 노래방 검색창</center>
</H1>
<form class = "form">
......
......@@ -22,7 +22,7 @@
<body>
<H2 id = "title_message">
<center>코인 노래방 검색창</center>
<center>경기 남부 코인 노래방 검색창</center>
</H2>
<div id="map" style="width:95%;height:600px;"></div>
......@@ -31,65 +31,153 @@
</script>
<script>
var mapContainer = document.getElementById('map'); // div to display map
var mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // coordinates of the center of the map
level: 3 // Magnification level of the map
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// Create a map with a div to display the map and map options
var map = new kakao.maps.Map(mapContainer, mapOption);
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성
// HTML5의 geolocation으로 사용할 수 있는지 확인
if (navigator.geolocation) {
// Get the connection location using GeoLocation
// GeoLocation을 이용해서 접속 위치를 얻어옴
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // latitude
lon = position.coords.longitude; // longitude
var now_lat = position.coords.latitude, // 현재 위도
now_lon = position.coords.longitude; // 현재 경도
// Creates the location where the marker will be displayed with the coordinates obtained from geolocation
var locPosition = new kakao.maps.LatLng(lat, lon)
message = '<div style="padding:1px;">여기에 계신가요?!</div>';
var locPosition = new kakao.maps.LatLng(now_lat, now_lon) // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성
// display a marker
displayMarker(locPosition,message);
// 마커를 표시
displayMarker(locPosition);
});
}
else { // When HTML5 GeoLocation is not available, set the marker display location and infowindow content
} else { //GeoLocation을 사용할 수 없을때 마커 표시 위치 설정
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667)
displayMarker(locPosition,message);
displayMarker(locPosition);
}
//function to display a marker on the map
function displayMarker(locPosition, message) {
// 지도에 마커를 표시하는 함수
function displayMarker(locPosition) {
// create a marker
// 마커를 생성
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, //Contents to display in info window
// 지도 중심좌표를 접속위치로 변경
map.setCenter(locPosition);
}
//엑셀 파일 데이터 불러오기
var XLSX = require("xlsx");
var workbook = XLSX.readFile("C:/Users/user/Documents/coinkaraoke/coin_karaoke/public/xlsx/latitude_longitute.xlsx")
var worksheet = workbook.Sheets[workbook.SheetNames[0]];
iwRemoveable = true;
var location_arr = []; //경기 나무 코인 노래방 주소 배열
var latitude_arr = []; //경기 나무 코인 노래방 위도 배열
var longitude_arr = []; //경기 나무 코인 노래방 경도 배열
//엑셀 파일 데이터(주소) 배열 저장
for(var i = 2 ; i <= 406; i++){
location_arr.push(worksheet[`A${i}`].v);
}
// make info window
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable :iwRemoveable
var geocoder = new kakao.maps.services.Geocoder();
//주소로부터 위도, 경도 찾기
for(var i = 0 ; i < 405 ; i ++){
geocoder.addressSearch(location_arr[i], function(result, status) {
latitude_arr[i].push(result[i].y);
longitude_arr[i].push(result[i].x);
});
}
// Display the info window on the marker
infowindow.open(map, marker);
var distance = []; //거리
var cal_distance = []; //거리
var near_coin_address = new Array(5); //가까운 코인 노래방 5개
var near_coin_latitude = new Array(5); //가까운 코인 노래방 5개
var near_coin_longtitude = new Array(5); //가까운 코인 노래방 5개
var near_coin_distance = new Array(5);
//거리계산
for(var i = 0 ; i < 405 ; i ++){
distance.push(Math.sqrt(Math.pow((now_lat - latitude_arr[i])) + Math.pow((now_lon -longitude_arr[i]))));
cal_distance.push(Math.sqrt(Math.pow((now_lat - latitude_arr[i])) + Math.pow((now_lon -longitude_arr[i]))));
}
// Change the map center coordinates to the connection location
map.setCenter(locPosition);
//거리에 따른 정렬
var temp;
for(var i = 0; i < 404 ; i ++){
for(var j = 0 ; j < 404-j ; j ++){
if(cal_distance[j] > cal_distance[j+1]){
temp = cal_distance[j];
cal_distance[j] = cal_distance[j+1];
cal_distance[j] = temp;
}
}
}
//가까운 거리 배열
for(var i = 0 ; i < 5 ; i ++){
near_coin_distance[i] = cal_distance[i];
}
for(var i = 0 ; i < 5 ; i ++){
for(var j = 0; j < 404 ; j ++){
if(near_coin_distance[i] == distance[j]){
near_coin_address[i] = location_arr[j];
near_coin_latitude[i] = latitude_arr[j];
near_coin_longtitude[i] = longitude_arr[j];
}
}
}
//가까운 코인 노래방 마킹
var positions = [
{
latlng: new kakao.maps.LatLng(near_coin_latitude[0], near_coin_longtitude[0])
},
{
latlng: new kakao.maps.LatLng(near_coin_latitude[1], near_coin_longtitude[1])
},
{
latlng: new kakao.maps.LatLng(near_coin_latitude[2], near_coin_longtitude[2])
},
{
latlng: new kakao.maps.LatLng(near_coin_latitude[3], near_coin_longtitude[3])
},
{
latlng: new kakao.maps.LatLng(near_coin_latitude[4], near_coin_longtitude[4])
}
];
// 마커 이미지의 이미지 주소
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
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, // 마커를 표시할 위치
image : markerImage // 마커 이미지
});
}
</script>
</body>
......