esper_Shared_Mobility_Repo/server/web_index.html

<!doctype html>
<html>
    <head>
        <title>Gps </title>
        <meta charset="utf-8">
        <title>지도 생성하기</title>
        
        <script src="/socket.io/socket.io.js"></script> 
       
    </head>
  
    <body>

        <div id="map" style="width:100%;height:700px;"></div>

        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=	6f7fabc77f1bff2334bd5521889a7b35"></script>
      
        
       <style> 

            table { border-collapse: collapse; }
        
            th, td { border: 1px solid black; padding: 50px; }
        
          </style>
        
        
        
        </head>
        
        <body>
        
            <table>
        
                <caption>ㅇ센서</caption>
        
                <tr>
                
                    <td></td>
        
                    <th scope="col">lat(위도)</th>
        
                    <th scope="col">lng(경도)</th>
        
                    <th scope="col">wear(착용여부)</tH>
                        
                </tr>
        
        
        
                <tr>
        
                    <th scope="row">GPS/Pressure</th>
        
                    
        
                    <td rowspan="1"><p id = 'lat'></p></td>
        
                    <td rowspan="2"><p id = 'lng'></p></td>

                    <td rowspan="3"><div id = 'Pressure'></div></td>
        
                </tr>
                
                <tr>
            </table>

           <td>  </div> </td>
        <script>
        
            var socket = io();
            var d;
            var c;
            var z=0;
            socket.on('data', function(data,count){
                
                if(count==1){
                    d= data;
                    console.log(data); 
                    document.getElementById('lat').innerHTML=d;              
                }
                else if(count==2){
                    c= data;
                    console.log(c);
                    document.getElementById('lng').innerHTML=c;
                }
                else if(count==0){
                    
                    if(data[1] == 'o'){
                    document.getElementById('Pressure').innerHTML = data.toString();
                    z=0;
                    }
                    else if(z != data[1]) {
                        z = data[1];
                        document.getElementById('Pressure').innerHTML = data.toString();
                        alert("사용자가 헬멧을 착용하고 있지 않습니다. 킥보드를 멈춤");
                }
                
                
           
              
                
            }
        });
            
  
            var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
            mapOption = {
                center: new kakao.maps.LatLng( 35.97043362952654,126.95478849952511), // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        // 지도에 표시될 객체를 가지고 있을 배열입니다
        const locations = [
            { place:"원광대학교1", lat: d, lng: c}
            //{ place:"비교 주소 ", lat:  35.97043362952654, lng: 126.95478849952511 }, 
        ];
        
        for (var i = 0; i < locations.length; i++) {
            var marker = new kakao.maps.Marker({
                map: map,
                position: new kakao.maps.LatLng(locations[i].lat, locations[i].lng)
            });
        }
 

        </script>
    </body>
</html>