개발자.. 너란놈..

안녕하세요

또 한달만에 작성하는 블로그 입니다.

구글 API를 사용하여 Marker를 여러개 세팅하고 클릭하면 해당 ID를 가져와서 해당 마커의 대한 데이터를 가져오려고  

만든 소스 입니다.

다른 분들도 필요할지 모르겠지만..

map = new google.maps.Map(document.getElementById('google_map'), {        
        center: {
            lat: 37.551073,
            lng: 126.987893
        },
        zoom: 10,        
        //zoomControl: false,  줌 컨트롤
        streetViewControl: false, //로드뷰 아이콘 on/off        
        mapTypeControl : false //맵 타입 on/off (지도 , 위성)
    });

    //Marker 위치 세팅 (label , 경도 , 위도 , 아이디)
    var locations = [
        ['서울역', 37.5546788, 126.9706069,'idtest1'],
        ['서울특별시청', 37.5668260, 126.9786567, 'idtest2'],
        ['을지로입구역', 37.5660373, 126.9821930, 'idtest3'],
        ['덕수궁', 37.5655638, 126.974894, 'idtest4'],
    ];   

    //var infowindow = new google.maps.InfoWindow();
    var marker, i;

	//위치를 세팅 시켜줍니다.
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            id: locations[i][3]
        });

		//Marker를 찍었을 때 클릭 이벤트
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                alert(this.id); //아이디 가져오기

                ////중심 위치를 클릭된 마커의 위치로 변경
                //map.setCenter(this.getPosition());
              
                ////마커 클릭 시의 줌 변화
                //map.setZoom(14);

                //마커 클릭 시 label 및 데이터 보여주기
                //infowindow.setContent(locations[i][0]);
                //infowindow.open(map, marker);
            }
        })(marker, i));
    }

해당 건은 여러개의 블로그를 보고 만들었습니다.

감사합니다 :D

오랜만에 인사드립니다.

새롭게 코딩을 요즘 잘 안하다 보니 기존에 썼던거만 쓰네요..

//4자리 시간 확인하여 AM/PM 구하기
function _fnSetAMPM(vTime) {
    var vValue = vTime.substr("0", "2");
    var vAMPM = vValue >= 12 ? "PM" : "AM";

    return vAMPM;    
}

오랜만에 글을 쓰는 것 같습니다.

원하는 날짜를 입력 후 앞뒤로 1주 전 혹은 2주 후 날짜를 가져와야 하는 문제가 있었는데

아래와 같이 매개변수를 현재 날짜를 입력 받고 전 후로 몇일 만큼 전에있는 데이터를 가져올지 세팅하는 함수입니다.

일 기준으로 되어있기 때문에

한달 단위 , 년 단위는 세팅이 되어있지 않습니다.

vDate는 년월일 세팅 Ex)20210827 or 2021-08-27 

vDiff는 몇일 전 후 세팅입니다 EX) 7 (일주일 후 날짜) , -7 (일주일 전 날짜)

function _fnSetDate(vDate,vDiff) {

    var vValue = vDate;
    var vValue_Num = vValue.replace(/[^0-9]/g, "");

    var rxDatePattern = /^(\d{4})(\d{1,2})(\d{1,2})$/; //Declare Regex                  
    var dtArray = vValue_Num.match(rxDatePattern); // is format OK?

    var dtYear = dtArray[1];
    var dtMonth = dtArray[2];
    var dtDay = dtArray[3];

    var nowDate = new Date(dtYear + "/" + dtMonth + "/" + dtDay);
    var weekDate = nowDate.getTime() + (vDiff * 24 * 60 * 60 * 1000);
    nowDate.setTime(weekDate);

    var weekYear = nowDate.getFullYear();
    var weekMonth = nowDate.getMonth() + 1;
    var weedDay = nowDate.getDate();

    if (weekMonth < 10) { weekMonth = "0" + weekMonth; }
    if (weedDay < 10) { weedDay = "0" + weedDay; }
    var result = weekYear + "-" + weekMonth + "-" + weedDay;

    return result;

}

"/"의 원하는 도메인으로 변경 할 수 있습니다. 

history.pushState(null, null, "/");


//ex) www.naver.com => www.naver.com/Testhaha
history.pushState(null, null, "/Testhaha");

//뒤로가기 이벤트로 왔을 경우 이벤트
if (event.persisted || (window.performance && window.performance.navigation.type == 2) || event.originalEvent && event.originalEvent.persisted) {

}

뒤로 가기로 넘어 왔을 때. 

History back 기능을 사용하기 위해 썼었습니다.

주의 하실 점은 영역이 먼저 잡혀있어야 됩니다. 

(display:none 상태이거나 영역이 잡혀있지 않으면 scrollHeight 길이를 잡을 수 없습니다.)

var vScrollDown = $("#selecter").prop('scrollHeight');
$("#selecter").scrollTop(vScrollDown);

빈 컬럼에 1씩 증가시켜서 데이터를 넣는 방법

UPDATE TABLE명 SET 컬럼명 = ROWNUM

ROWNUM을 이용하여 빈값에 UPDATE를 1씩 증가시켜서 하는 방법입니다.

만약 값이 있는 상태라면, ROWNUM 대신 아래를 참고해주세요.

UPDATE 테이블 명 SET 컬럼명 =  NVL(MAX(컬럼명), 0)+ 1

table을 사용하다 보면 제목? table head 부분을 고정시키고 아래있는 Tbody (Table Body)부분은 스크롤을 만들어서 사용 하고 싶을 떄가 있습니다.

물론 CSS로 조지면 당연히 원하는대로 만들 수 있지만 빠르게 만들어야 하고 CSS도 많이 건들여야 하는 상황에서는 어떻게 해야될까요?

답은 아래에 있습니다.

slimScrollBar API를 사용하면 됩니다.

http://rocha.la/jQuery-slimScroll

https://github.com/rochal/jQuery-slimScroll

심플하게 사용해 볼까요?

아래의 HTML이 있습니다. 

Id는 SlimScrollBar를 위해 만들었습니다.

<div>
	<table>
    	<thead>
        	<tr>
            	<th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
                <th>행고정</th>
            </tr>
        </thead>
        <tbody id="slimScroll">
        	<tr>
            	<td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
                <td>Test1<td>
            </tr>
        </tbody>
    </table>

</div>

JavaScript

$('#slimScroll').slimScroll({  
  size : "5px", //스크롤 사이즈
  alwaysVisible: true //항상 보여줄 것인지  
})

이렇게 HTML을 만들고 JavaScript에 SlimScroll을 넣으면 그 해당 영역에는 스크롤이 얉게 생길 겁니다 ㅎ

이 것으로 테이블에 제목 행을 고정하고 내용에 스크롤이 들어가는 API 사용법을 알게 되었습니다.

직접 사이트에 들어가면 slimScroll의 속성들도 많이 있으니 한번정도 읽어보시는게 좋을 것 같습니다.