index.html 5.95 KB
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  
  <title>영통구 음식점 추천</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=6u4gqwh2ta"></script>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=6u4gqwh2ta&submodules=geocoder"></script>
 </head>
 <body>
	<div id = "title">
		<br>
		<h2><center>영통구 음식점 추천 페이지<br><br><br>
		</center></h2>
		
	</div>
	<div class = "left">
		<br>선택하세요!
		<br>
		<div id = "left_left" class = "left">
			<br>
			<select name = "dong", id = "dong">
				<option value = "">동 선택</option>
				<option value = "영통동">영통동</option>
				<option value = "매탄동">매탄동</option>
				<option value = "원천동">원천동</option>
			</select>
			<br>
		</div>
		<div id = "left_right" class = "left">
			<br>
			<select name = "food", id = "food">
				<option value = "">음식 종류 선택</option>
				<option value = "한식">한식</option>
				<option value = "일식">일식</option>
				<option value = "중식">중식</option>
				<option value = "양식">양식</option>
			</select>
			<br>
		</div>
		<div id = "left_bottom" class = "left">
			
			<button onclick = "onClick()">지도에서 확인하기!</button> 
			<br>
			<br>
			<textarea id = "textcontents" cols = "60" rows = "10"style="border:7px solid rgb(191, 191, 191);"></textarea>
		</div>
	</div>

	<div id = "right" style = "width:600px;height:430px;border:7px solid rgb(191, 191, 191);float:right">
	</div>

	<!--<script type = "text/javascript">
		var mapOptions = {
			center: new naver.maps.LatLng(37.250899, 127.072985),
			zoom : 10
		};
		var map = new naver.maps.Map('right', mapOptions);
	</script>-->
	<script type = "text/javascript">
		function onClick(){
			var target_dong = document.getElementById("dong");
			var target_food = document.getElementById("food");
			if(target_dong.options[target_dong.selectedIndex].value == "" || target_food.options[target_food.selectedIndex].value == "")
			{
				alert('선택하세요.');
			}
			else
			{
				var message = target_dong.options[target_dong.selectedIndex].value + ' ' + target_food.options[target_food.selectedIndex].value;
				alert('전달 메세지 : ' + message);

				 // 웹소켓 전역 객체 생성
				var ws = new WebSocket("ws://localhost:9000");

				// 연결이 수립되면 서버에 메시지를 전송한다
				ws.onopen = function(event) {
					ws.send(message);
				}

				// 서버로 부터 메시지를 수신한다
				ws.onmessage = function(event) {
					ws.close();
					console.log("Server message: ", event.data);
					var result = JSON.parse(event.data);
					// result.title, mapx, mapy
					
					var mapOptions = {
						center: new naver.maps.LatLng(37.250899, 127.072985),
						zoom : 10
					};
					var map = new naver.maps.Map('right', mapOptions);

					var marker = new Array(5);
					var textString = '';
					for(var i = 0; i < result.length; i++)
					{
						var tm128 = new naver.maps.Point(result[i].mapx, result[i].mapy);
						var naverpoint = naver.maps.TransCoord.fromTM128ToNaver(tm128);
						var latlng = naver.maps.TransCoord.fromNaverToLatLng(naverpoint);
						marker[i] = new naver.maps.Marker({
							position : new naver.maps.LatLng(latlng),
							map : map
						});

						textString = textString + '이름 : ' + result[i].title + '\n주소 : ' + result[i].address + '\nTEL) : ' + result[i].telephone + '\n';

						var contentString = [
							'<div class = iw>',
							'	<h3><center>' + result[i].title + '</center></h3>',
							'	<p><font size = "2"> 주소 : ' + result[i].address + '</br>',
							'	TEL) : ' + result[i].telephone + '</font></p>',
							'</div>'
						].join('');

						var infowindow = new naver.maps.InfoWindow({
							content : contentString,
							position : new naver.maps.LatLng(latlng)
						});

						naver.maps.Event.addListener(marker[i], "click", function(e) {
							if(infowindow.getMap()) {
								infowindow.close();
							} else {
								infowindow.open(map, marker[i]);
							}
						});
					}
					var textElement = document.getElementById('textcontents');
					textElement.value = '';
					textElement.value = textString;

				}

				// error event handler
				ws.onerror = function(event) {
					console.log("Server error message: ", event.data);
				}
			}
		};
	</script>

	<style type="text/css">
	body {
		font-family: '배달의민족 도현';
		background-color: rgb(230, 243, 255);
		line-height: 110%;

	}
	button {
		width: 220px;
		font-family: '배달의민족 도현';
		font-size:20px;
		background-color: rgb(194, 240, 194);
		box-sizing: border-box;
		border: 3px solid rgb(194, 240, 194);
		border-radius: 4px;
		padding: 15px 15px 15px 15px; 
		
	}
	select {
		width: 200px;
		border: 3px solid rgb(251, 199, 205);
		border-radius: 4px;
		font-size: 20px;
		font-family: '배달의민족 도현';
		background-color: rgb(251, 199, 205);
		background-position: 5px 2.5px; 
		padding: 10px 10px 10px 10px; 	
	}
	div
	#title
	{
		width : 200px;
		height : 400px;
		float : left;
		text-align : center;
		border : 3px solid rgb(230, 243, 255);
	}
	.left
	{
		font-size: 20px;
		width : 600px;
		height : 430px;
		float : left;
		text-align : center;
		border : 7px solid rgb(191, 191, 191);
	}
	#left_left
	{
		width : 240px;
		height : 100px;
		float : left;
		border : 3px solid rgb(230, 243, 255);
	}
	#left_right
	{
		width : 240px;
		height : 100px;
		float : right;
		border : 3px solid rgb(230, 243, 255);
	}
	#left_bottom
	{
		width : 600px;
		height : 300px;
		float : left;
		border : 7px solid rgb(230, 243, 255);
	}
	</style>
 </body>
</html>