네이버지도 메모
<script type="text/javascript" src="<c:out>" target="_blank">http://openapi.map.naver.com/openapi/v2/maps.js?clientId=<c:out value="${clientId}"/>"></script>
<!--For Commons Validator Client Side-->
<script type="text/javascript" src="<c:url value='/common/validator.do'/>"></script>
<validator:javascript formName="assignVO" staticJavascript="false" xhtml="true" cdata="false"/>
<script type="text/javaScript" language="javascript" defer="defer">
var pointPoition = "";
var mapStatus = "1";
var poiValue = "";
var mapValueX = "";
var mapValueY = "";
var oMarkerParam = new Array();
//이전마커
var preoMarker;
//이전포인트
var preoPoint;
//라벨지
var preoLabel;
$(function() {
var dates = $("#orgnTime, #desnTime").datepicker({
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
dateFormat: 'yymmdd',
showMonthAfterYear: true,
yearSuffix: '년',
onSelect: function( selectedDate ) {
var option = this.id == "orgnTime" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
if('${insertYn}' == "Y") {
alert('<c:out value="${message}"/>');
var opener;
getDialogArguments();
if (window.dialogArguments) {
opener = window.dialogArguments; // Support IE
} else {
opener = window.opener; // Support Chrome, Firefox, Safari, Opera
}
opener.document.location.href="<c:url value='/drt/assign/assignManage.do'/>";
parent.window.close();
}
//지도
var oCenterPoint = new nhn.api.map.LatLng("${mapCenterInfo.gpsYcrd}", "${mapCenterInfo.gpsXcrd}"); // Y, X
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naver_map', {
point : oCenterPoint,
zoom : 11, // - 초기 줌 레벨은 11
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(640, 400)
});
/* 중심점 써클 그리기
var circle = new nhn.api.map.Circle({
strokeColor : "red",
strokeOpacity : 1,
strokeWidth : 1,
fillColor : "blue",
fillOpacity : 0.5
});
var radius = 5; // - radius의 단위는 meter
circle.setCenterPoint(new nhn.api.map.LatLng("${mapCenterInfo.gpsYcrd}", "${mapCenterInfo.gpsXcrd}")); // - circle 의 중심점을 지정한다.
circle.setRadius(radius); // - circle 의 반지름을 지정하며 단위는 meter이다.
circle.setStyle("strokeColor", "blue"); // - 선의 색깔을 지정함.
circle.setStyle("strokeWidth", 3); // - 선의 두께를 지정함.
circle.setStyle("strokeOpacity", 1); // - 선의 투명도를 지정함.
circle.setStyle("fillColor", "none"); // - 채우기 색상. none 이면 투명하게 된다.
oMap.addOverlay(circle);
*/
var markerCount = 0;
// 컨트롤 설정
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({right:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
var oInfoWnd = new nhn.api.map.InfoWindow();
oInfoWnd.setVisible(false);
oMap.addOverlay(oInfoWnd);
oInfoWnd.setPosition({
top : 20,
left :20
});
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oInfoWnd.attach('changeVisible', function(oCustomEvent) {
if (oCustomEvent.visible) {
oLabel.setVisible(false);
}
});
/*
var oPolyline = new nhn.api.map.Polyline([], {
strokeColor : '#f00', // - 선의 색깔
strokeWidth : 5, // - 선의 두께
strokeOpacity : 0.5 // - 선의 투명도
}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
*/
oMap.attach('mouseenter', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});
oMap.attach('mouseleave', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에서 마우스 나간거면
if (oTarget instanceof nhn.api.map.Marker) {
oLabel.setVisible(false);
}
});
//icon 이미지를 바꿔서 사용할 수 있습니다.
var oMarker = new nhn.api.map.Marker(oIconOn, { title : '${mapCenterInfo.addrNm}', zIndex : 1 });
oMarker.setPoint(oCenterPoint);
oMap.addOverlay(oMarker);
// 마커라벨 표시
var oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언
//oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨
oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기
//이전마커, 포인트, 라벨 저장
preoMarker = oMarker;
preoPoint = oCenterPoint;
preoLabel = oLabel1;
//마커 추가
/* var oPoint = new nhn.api.map.LatLng("36.3518983", "127.3813287");
var oMarker = new nhn.api.map.Marker(oIconOn, { title : '건설사', zIndex : 1 });
//변수전달 방법, 배열사용
oMarkerParam[0] = '변수값1';
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
*/
//첫 마커의 설명창만 보이게 설정
/*
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용33, 변수='+oMarkerParam[0]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
*/
// 마커라벨 표시
/* var oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언
oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨
oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기
var oPoint = new nhn.api.map.LatLng("36.35189", "127.3822286");
var oMarker = new nhn.api.map.Marker(oIconOn, { title : 'XX건설', zIndex : 1 });
//변수전달 방법, 배열사용
oMarkerParam[0] = '변수값2';
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
// 마커라벨 표시
var oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언
oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨
oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기
*/
/*
oMap.attach('click', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
var oMarkerId = oCustomEvent.target.getTitle();
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
//oTarget.setIcon(oIconOn);
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
infoWindow.setPoint(oTarget.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
return;
}
});
*/
oMap.attach('click', function(oCustomEvent) {
var oPoint = oCustomEvent.point;
var oTarget = oCustomEvent.target;
oInfoWnd.setVisible(false);
//이전 포인트 삭제
if(preoMarker != undefined) {
if (oTarget instanceof nhn.api.map.Marker) {
} else {
oMap.removeOverlay(preoMarker);
//라벨삭제
oLabel1.setVisible(false, oMarker);
}
}
/*
var stroPoint = oPoint+"";
var arr = new Array();
arr = stroPoint.split(',');
//포인트
var sPoints_1 = new Array();
var sPoint0_1 = new nhn.api.map.LatLng(arr[0], arr[1]);
var oMarker0_1 = new nhn.api.map.Marker(oIconOn, { title : '중심점테스트' });
oMarker0_1.setPoint(sPoint0_1);
oMap.addOverlay(oMarker0_1);
sPoints_1 = sPoint0_1;
//if( pointCnt_1 > 1 ){
// oMap.setBound(sPoints_1);
//}
*/
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
// 겹침 마커 클릭한거면
if (oCustomEvent.clickCoveredMarker) {
return;
}
// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
// - 단, DIV 의 position style 은 absolute 가 되면 안되며,
// - absolute 의 경우 autoPosition 이 동작하지 않습니다.
/*
oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' +
'Hello World ' + oTarget.getPoint()
+'<span></div>');
oInfoWnd.setPoint(oTarget.getPoint());
oInfoWnd.setPosition({right : 5, top : 10});
oInfoWnd.setVisible(true);
oInfoWnd.autoPosition();
*/
return;
}
//var oMarker = new nhn.api.map.Marker(oIconOn, { title : '마커 : ' + oPoint.toString() });
var oMarker = new nhn.api.map.Marker(oIconOn, { title : '신규장소'});
preoMarker = oMarker;
preoPoint = oPoint;
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//선택한곳으 중심점으로 이동
oMap.setCenter(oPoint, mapZoom);
//var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
//aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
//oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
//선택값 초기화
valueReset();
//포커스 이동및시안성좋게
$('#poiNm').focus();
$('#poiNm').css('backgroundColor', '#F5A9A9');
$('#poiNm').fadeTo('slow', 0.5, function () {
$(this).css('backgroundColor', '#FFFFFF');
});
//선택한 좌표 저장
var arry = new Array();
arry = oPoint.toString().split(",");
if(arry.length > 0) {
if(arry[0].length > 10) {
arry[0] = arry[0].substring(0, 10);
}
if(arry[1].length > 10) {
arry[1] = arry[1].substring(0, 10);
}
mapValueX = arry[0];
mapValueY = arry[1];
}
});
//관리자 지역 차고지 주변 목록 조회
//좌표셋팅
mapValueX = "${mapCenterInfo.gpsXcrd}";
mapValueY = "${mapCenterInfo.gpsYcrd}";
selectionPointLoding("1");
$("#poiList").on("click", function(){
if(pointPoition == "") {
return;
}
var pointX = "";
var pointY = "";
var pointNm = "";
if(pointPoition == "1") {
pointX = $("#orgnPoiX").val();
pointY = $("#orgnPoiY").val();
pointNm = $("#orgnPoiNoNm").val();
} else {
pointX = $("#desnPoiX").val();
pointY = $("#desnPoiY").val();
pointNm = $("#desnPoiNoNm").val();
}
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
var poiPoint = new nhn.api.map.LatLng(pointY, pointX); // Y, X
var oMarker = new nhn.api.map.Marker(oIconOn, { title : pointNm });
oMarker.setPoint(poiPoint);
oMap.addOverlay(oMarker);
//이전 마커 삭제
oMap.removeOverlay(preoMarker);
preoLabel.setVisible(false, preoMarker);
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({right:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//선택한곳으 중심점으로 이동
oMap.setCenter(poiPoint, mapZoom);
//이전마커 및 포인트에 저장
preoMarker = oMarker;
preoPoint = poiPoint;
});
});
//리셋
function windowReset() {
$("#favTr").hide();
document.assignVO.reset();
//검색어 초기화
$("#searchKeyword").val("");
//등록어 초기화
$("#poiNm").val("");
//차고지 기준 주변목록 가져오기
selectionPointLoding("1");
}
function assignInsert() {
if(!validateAssignVO(document.assignVO)){
return;
}else{
//전화번호체크
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
if (!regExp.test( $("#apmtTlno").val())) {
alert("전화번호가 잘못 되었습니다. 자릿수 및 숫자, - 를 포함한 숫자만 입력하세요.");
return
}
if(confirm("예약정보를 등록 하시겠습니까?")) {
$("#orgnTime").val($("#orgnTime").val()+$("#orgnTimeHh").val()+$("#orgnTimeMi").val());
$("#desnTime").val($("#desnTime").val()+$("#desnTimeHh").val()+$("#desnTimeMi").val());
$("#assignVO").attr("target", "insertIfrm");
$("#assignVO").attr("action", "<c:url value='/drt/assign/insert.do'/>").submit();
}
}
}
function setPoint(v) {
pointPoition = v;
}
function mapSearch() {
if($("#searchKeyword").val() == "") {
alert("검색어를 입력해주세요.");
$("#searchKeyword").focus();
return;
}
//초기화
/*
poiValue = "";
mapValueX = "";
mapValueY = "";
*/
//맵검색목록
selectionPointLoding("2");
}
//주변목록
function selectionPointLoding(type) {
//최초 주변목록 인지 검색인지 구분한다.
var typeUrl = "";
if(type == "1") {
typeUrl = "<c:url value='/drt/assign/poiList.do'/>";
} else {
typeUrl = "<c:url value='/drt/assign/poiSearchList.do'/>";
}
$.ajax({
url: typeUrl,
type: 'post',
data: {
gpsXcrd: mapValueX,
gpsYcrd: mapValueY,
searchKeyword: $("#searchKeyword").val()
},
success: function(data) {
$("#poiList").children().remove();
var poiListTag = "";
var pioCnt = 1;
if(data.poiList.length > 0) {
$.each(data.poiList, function(key, val) {
poiListTag +=
"<li style='border-bottom:1px solid #e6e6e6; margin-left: 5px;'>"+
"<a href='#none' onclick=\"javascript:selectionPoint('"+val.poiNo+"', '"+val.poiNm+"', '"+val.gpsXcrd+"', '"+val.gpsYcrd+"');\">"+(pioCnt++)+"."+val.poiNm+"</a>"+
"</li>";
});
$("#poiList").append(poiListTag);
} else {
poiListTag =
"<li style='border-bottom:1px solid #e6e6e6; margin-left: 5px;'>"+
"주변 목록 없음."+
"</li>";
$("#poiList").append(poiListTag);
}
},
error: function(data){
console.log(data);
return;
}
});
}
function selectionPoint(poiNo, nm, poiX, pioY) {
if(pointPoition == "") {
alert("출발지 인지 목적지 인지 먼저 선택해주세요.");
return;
}
if(pointPoition == "1") {
$("#orgnPoiNo").val(poiNo);
$("#orgnPoiNoNm").val(nm);
$("#orgnPoiX").val(poiX);
$("#orgnPoiY").val(pioY);
} else {
$("#desnPoiNo").val(poiNo);
$("#desnPoiNoNm").val(nm);
$("#desnPoiX").val(poiX);
$("#desnPoiY").val(pioY);
}
}
//POI등록
function settingPoi() {
if(pointPoition == "") {
alert("출발지 인지 목적지 인지 먼저 선택해주세요.");
return;
}
if($("#poiNm").val() == "") {
alert("신규로 등록할 장소명을 입력해주세요.");
$("#poiNm").focus();
return;
}
//POI 등록
$.ajax({
url: "<c:url value='/drt/assign/poiInsert.do'/>",
type: 'post',
data: {
poiNm: $("#poiNm").val(),
gpsXcrd: mapValueX,
gpsYcrd: mapValueY
},
success: function(data) {
settingPoiValue(data.result);
},
error: function(data){
console.log(data);
return;
}
});
}
//등록된POI값으로 셋팅
function settingPoiValue(value) {
if(pointPoition == "1") {
$("#orgnPoiNoNm").val($("#poiNm").val());
$("#orgnPoiNo").val(value);
$("#orgnPoiX").val(mapValueX);
$("#orgnPoiY").val(mapValueY);
} else {
$("#desnPoiNoNm").val($("#poiNm").val());
$("#desnPoiNo").val(value);
$("#desnPoiX").val(mapValueX);
$("#desnPoiY").val(mapValueY);
}
console.log("value : "+value+", pointPoition : "+pointPoition);
//초기화
pointPoition = "";
$("#searchKeyword").val("");
$("#poiNm").val("");
}
//기존이력 가져오기
function loadMyLocation() {
if($("#apmtTlno").val() == "") {
alert("전화번호를 입력해주세요.");
return;
}
//전화번호체크
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
if (!regExp.test( $("#apmtTlno").val())) {
alert("전화번호가 잘못 되었습니다. 자릿수 및 숫자, - 를 포함한 숫자만 입력하세요.");
return
}
$.ajax({
url: "<c:url value='/drt/assign/favList.do'/>",
type: 'post',
data: {
apmtTlno: $("#apmtTlno").val()
},
success: function(data) {
$("#favList").children().remove();
var favListTag = "";
var cnt = 1;
if(data.favList.length > 0) {
$.each(data.favList, function(key, val) {
favListTag +=
"<li style='border-bottom:1px solid #e6e6e6; margin-left: 5px;'>"+
"<a href='#none' onclick=\"javascript:favSelectionPoint('"+val.apmtTlno+"', '"+val.apmtNm+"', '"+val.orgnPoiNoNm+"', '"+val.orgnPoiNo+"', '"+val.orgnPoiNoNm+"', '"+val.orgnPoiX+"', '"+val.orgnPoiY+"', '"+val.desnPoiNo+"', '"+val.desnPoiNoNm+"', '"+val.desnPoiX+"', '"+val.desnPoiY+"');\">"+(cnt++)+".<strong>출발지</strong> : "+val.orgnPoiNoNm+" -> <strong>도착지</strong> : "+val.desnPoiNoNm+"</a>"+
"</li>";
});
$("#favTr").toggle(350);
} else {
alert("기존 이력이 존재하지 않습니다.");
return;
}
$("#favList").append(favListTag);
},
error: function(data){
console.log(data);
return;
}
});
}
//기존이력 선택시 셋팅
function favSelectionPoint(apmtTlno, apmtNm, orgnPoiNoNm, orgnPoiNo, orgnPoiNoNm, orgnPoiX, orgnPoiY, desnPoiNo, desnPoiNoNm, desnPoiX, desnPoiY){
$("#apmtTlno").val(apmtTlno);
$("#apmtNm").val(apmtNm);
$("#orgnPoiNoNm").val(orgnPoiNoNm);
$("#orgnPoiNo").val(orgnPoiNo);
$("#orgnPoiNoNm").val(orgnPoiNoNm);
$("#orgnPoiX").val(orgnPoiX);
$("#orgnPoiY").val(orgnPoiY);
$("#desnPoiNo").val(desnPoiNo);
$("#desnPoiNoNm").val(desnPoiNoNm);
$("#desnPoiX").val(desnPoiX);
$("#desnPoiY").val(desnPoiY);
$("#favTr").toggle(350);
}
//선택값 초기화
function valueReset() {
$("#poiNm").val("");
if(pointPoition == "1") {
$("#orgnPoiNo").val("");
$("#orgnPoiNoNm").val("");
$("#orgnPoiX").val("");
$("#orgnPoiY").val("");
} else {
$("#desnPoiNo").val("");
$("#desnPoiNoNm").val("");
$("#desnPoiX").val("");
$("#desnPoiY").val("");
}
}
</script>
걍메모
systemddc (조현)
Gravatar란?
Gravatar는 블로그에 글을 쓰거나 댓글을 쓰는 것 같은 일을 할 때 이름 옆에 나타나서
사이트마다 당신을 따라다니는 그림이에요.
Gravatar를 설정하고 난다음 블로그에 글을쓰거나 댓글을쓸경우 이메일 주소를 입력하고
글을쓰게 되면 Gravatar설정된 자신의 프로필 이미지를 가져오게 됩니다.
Gravatar설정 -> 링크
