블로그 :: 블로그

전체 글

테스트 2020.07.29 2
[Google Map API] 주소 입력시 좌표 반환 받고 맵 마커 찍기. 2019.02.17
[Windows 10, Apache2.4] 날짜별로 로그찍는 방법. 2019.02.04
CentOS7 Server 설치시 마우스가 안먹힐 때 2019.01.19
이클립스 Atom dark 테마랑 아주 비슷한 것 (DevStyle 테마) 2018.09.10

테스트

2020. 7. 29. 18:44

최소 크기 테스트

'환경 설정 > 기타' 카테고리의 다른 글

PC Microsoft Edge 에서 실업급여 동영상 시청시 흰 화면만 나올 때 (0)	2021.02.17
Logitech 무선 키보드, 공공기관 사이트 보안프로그램 충돌로 키보드가 먹통될 때 해결 방법 (0)	2021.02.15

[Google Map API] 주소 입력시 좌표 반환 받고 맵 마커 찍기.

2019. 2. 17. 22:56

이 코드 그대로 적용하면 주소 설정할 때마다 마커가 계속 찍혀 맵 하나에 여러 마커가 생긴다.

맵 마커 제거 코드는 여기에서 참고하면 될 것 같다.

그리고 Google Map API 사용할 때 key 파라미터에는 구글에서 발급받은 API_KEY를 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html,
        body,
        #google-map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0
        }
 
        #search-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #FFFFFF;
            padding: 5px;
            border: 1px solid black;
            text-align: center;
            padding: left: 10px
        }
    </style>
    <title></title>
</head>
<body>
    <div id="search-panel">
        <input id="address" type="text" value="주소 입력값" />
        <button id="submit" type="button" value="Geocode">지도 검색</button>
    </div>
    <div id="google-map">
    </div>
 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Google Map API -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
    <script>
        /**
         * Google Map API 주소의 callback 파라미터와 동일한 이름의 함수이다.
         * Google Map API에서 콜백으로 실행시킨다.
         */
        function initMap() {
            console.log('Map is initialized.');
 
            /**
             * 맵을 설정한다.
             * 1번째 파라미터 : 구글 맵을 표시할 위치. 여기서는 #google-map
             * 2번째 파라미터 : 맵 옵션.
             *      ㄴ zoom : 맵 확대 정도
             *      ㄴ center : 맵 중심 좌표 설정
             *              ㄴ lat : 위도 (latitude)
             *              ㄴ lng : 경도 (longitude)
             */
            var map = new google.maps.Map(document.getElementById('google-map'), {
                zoom: 12.5,
                center: {
                    lat: -34.397,
                    lng: 150.644
                }
            });
 
            /**
             * Google Geocoding. Google Map API에 포함되어 있다.
             */
            var geocoder = new google.maps.Geocoder();
 
            // submit 버튼 클릭 이벤트 실행
            document.getElementById('submit').addEventListener('click', function() {
                console.log('submit 버튼 클릭 이벤트 실행');
 
                // 여기서 실행
                geocodeAddress(geocoder, map);
            });
 
            /**
             * geocodeAddress
             * 
             * 입력한 주소로 맵의 좌표를 바꾼다.
             */
            function geocodeAddress(geocoder, resultMap) {
                console.log('geocodeAddress 함수 실행');
 
                // 주소 설정
                var address = document.getElementById('address').value;
 
                /**
                 * 입력받은 주소로 좌표에 맵 마커를 찍는다.
                 * 1번째 파라미터 : 주소 등 여러가지. 
                 *      ㄴ 참고 : https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
                 * 
                 * 2번째 파라미터의 함수
                 *      ㄴ result : 결과값
                 *      ㄴ status : 상태. OK가 나오면 정상.
                 */
                geocoder.geocode({'address': address}, function(result, status) {
                    console.log(result);
                    console.log(status);
 
                    if (status === 'OK') {
                        // 맵의 중심 좌표를 설정한다.
                        resultMap.setCenter(result[0].geometry.location);
                        // 맵의 확대 정도를 설정한다.
                        resultMap.setZoom(18);
                        // 맵 마커
                        var marker = new google.maps.Marker({
                            map: resultMap,
                            position: result[0].geometry.location
                        });
 
                        // 위도
                        console.log('위도(latitude) : ' + marker.position.lat());
                        // 경도
                        console.log('경도(longitude) : ' + marker.position.lng());
                    } else {
                        alert('지오코드가 다음의 이유로 성공하지 못했습니다 : ' + status);
                    }
                });
            }
        }
    </script>
</body>
</html>

Colored by Color Scripter

저작자표시 비영리

[Windows 10, Apache2.4] 날짜별로 로그찍는 방법.

2019. 2. 4. 01:13

{아파치가 설치된 경로}/httpd.conf 파일에서

log_config_module이 아래처럼 주석이 없는 것을 확인 후 (기본 설정이면 주석이 없다.)

LoadModule log_config_module modules/mod_log_config.so

<IfModule log_config_module> 안에서

<IfModule log_config_module>

이렇게 되어있는 것을

CustomLog "logs/access.log" common

이렇게 바꾼다.

CustomLog "|bin/rotatelogs.exe logs/%Y%m%d_access.log 86400" combined

Windows 운영체제에선 반드시 rotatelogs 다음에 .exe 를 붙여주어야 한다. 참고

다른 것은 달라질 것이 없으니 Apache2.4 문서를 참고하면 된다.

저작자표시 비영리

CentOS7 Server 설치시 마우스가 안먹힐 때

2019. 1. 19. 18:08

- 상황 -

웹프로그래밍 연습으로 가상 머신으로 서버를 돌리려고 Oracle사의 Virtual Box를 깔고

CentOS 7 Server 버전을 설치하려고 iso파일을 다운받았다.

몇가지 설정을 마친 후에 시작을 눌러보면 "마우스 통합"이 지원되지 않는다고 한다.

별 상관없겠지 넘어가다 갑자기 GUI가 나오면서 마우스가 필요한데 가상머신 안에서 마우스가 먹히질 않는다.

- 시도 -

가상 머신을 실행하면 기본 설정으로 우측 하단에 작은 아이콘 모양들이 여럿 있다. 그 중 USB 아이콘을 발견하고 [설정]탭에 들어간 후 [USB]탭에 내 마우스를 연결 시켰다. 다시 가상 머신을 실행하고 마우스를 움직여보니 되기는 되었다. 하지만 커서가 안보여 버튼을 클릭할 수 없었다.
한참 찼다가. Virtual Box CentOS server mouse라고 검색후 첫 번째 글을 봤다. 댓글을 보는데 [설정] -> [시스템] -> [마더보드(M)]에서 포인팅 장치(P)의 값을 USB 태블릿 으로 설정해보라고 한다. 설정하고 가상 머신을 다시 켜보니 조그만 마우스 커서가 보였다.

- 해결 방법 -

1. Oracle VM VirtualBOX 관리자 창으로 돌아간다.

2. Oracle VM VirtualBOX 관리자 창에서 가상 머신을 선택한 후 설정(S) 버튼을 클릭해 설정 창으로 이동한다.