[1] 드래그 앤 드롭_위치정보
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>JS DragDrop</title>
<style>
#cart{
width: 400px; height: 150px; padding: 10px; border: 1px dotted red;
}
</style>
<script>
//이벤트 발동하는 요소 변수
var id;
//카트에 올라 왔는지 확인하는 변수
var isOverCart = false;
function stratDrag(){
//드래그가 되는 요소의 식별 id값을 변수에 저장 (end될 때 쓰려고)
id = event.target.id //이벤트를 발동한 녀석
};
//div에 요소가 올라왔을 때 발동
function overDrag(){
//요소 위에 다른 요소가 놓여질 수 없도록 되어 있는 디폴트 값을 방지하도록(없애) 하여 드롭을 허용시키기
event.preventDefault();
isOverCart = true
}
function leaveDrag(){
isOverCart = false;
}
//드래그 마우스 뗄 때 발동
function endDrag() {
//처음 드래그 시작될 때 저장했던 id를 이용하여 요소 찾기
if(isOverCart) {
var e = document.getElementById(id);
document.getElementById('cart').appendChild(e);
isOverCart = false; //초기화 해줘야 다음 녀석 영향 안받음
}
}
</script>
</head>
<body>
<div id="cart" ondragover="overDrag()" ondragleave="leaveDrag()"></div>
<img src="./image/computer.png" alt="computer" width="150" height="150" id="img1" ondragstart="stratDrag()" ondragend="endDrag()">
<img src="./image/notebook.png" alt="computer" width="150" height="150" id="img2" ondragstart="stratDrag()" ondragend="endDrag()">
</body>
</html>
[2] 위치정보 얻기
1. 함수 소개
getCurrentPosition() : 위치 얻기 (한번만 얻어옴)
watchPosition() : 위치정보 계속해서 얻기
clearWatch() : watchPosition() 클리어
2. 기본 사용 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> geoLocation </title>
<script>
//getCurrentPosition()
function aaa(){
//비동기 - 콜백으로 결과 옴
//함수형프로그래밍 : 함수를 파라미터로 전달하는 것
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById('hh').innerHTML = latitude + ", " + longitude;
});
}
//watchPosition()
function bbb(){
id = navigator.geolocation.watchPosition(function(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.querySelector('#hh').innerHTML = `${lat}, ${lng}`; //JS 템플릿 문자열 ``(백틱)안에서 ${}로 변수 구분
});
}
//clearWatch()
function ccc(){
//watchPosition()의 식별자를 clearWatch() 괄호 안에 넣어서 클리어
navigator.geolocation.clearWatch(id);
}
</script>
</head>
<body>
<button onclick="aaa()">my location</button>
<h2 id="hh">location</h2>
<button onclick="bbb()">위치 자동 업뎃</button>
<button onclick="ccc()">위치 자동 업뎃 취소</button>
</body>
</html>
[3] 카카오맵 사용
1. 카카오 개발자 사이트에서 설정하기
https://apis.map.kakao.com/web/guide/
지도 영역 스타일 사이즈 필수!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> ajax </title>
</head>
<body>
<!-- 지도 API 확인은 웹서버에서만 동작한다!! -->
<!-- 카카오 지도 API 사용법은 개발자 사이트에서 확인 -->
<!-- 지도 보여줄 영역 : 사이즈 지정 필수!! -->
<div id="map" style="width:500px;height:400px;"></div>
<!-- 카카오 지도 라이브러리 적용 -->
<!-- <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=83d46b0ce6d16a7ea9d8b366551c8af9"></script>
<!-- 실제 지도 관련 작업 스크립트 : 지도를 띄우는 코드-->
<script>
//지도 띄우기
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
//마커 표시
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
var marker = new kakao.maps.Marker({
position : markerPosition
});
marker.setMap(map);
</script>
<hr>
<div id="map2" style="width:100%;height:400px;"></div>
<script>
var mapContainer = document.getElementById('map2'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.502, 127.026581), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 커스텀 오버레이에 표시할 내용입니다
// HTML 문자열 또는 Dom Element 입니다
var content = '<div class="overlaybox">' +
' <div class="boxtitle">금주 영화순위</div>' +
' <div class="first">' +
' <div class="triangle text">1</div>' +
' <div class="movietitle text">드래곤 길들이기2</div>' +
' </div>' +
' <ul>' +
' <li class="up">' +
' <span class="number">2</span>' +
' <span class="title">명량</span>' +
' <span class="arrow up"></span>' +
' <span class="count">2</span>' +
' </li>' +
' <li>' +
' <span class="number">3</span>' +
' <span class="title">해적(바다로 간 산적)</span>' +
' <span class="arrow up"></span>' +
' <span class="count">6</span>' +
' </li>' +
' <li>' +
' <span class="number">4</span>' +
' <span class="title">해무</span>' +
' <span class="arrow up"></span>' +
' <span class="count">3</span>' +
' </li>' +
' <li>' +
' <span class="number">5</span>' +
' <span class="title">안녕, 헤이즐</span>' +
' <span class="arrow down"></span>' +
' <span class="count">1</span>' +
' </li>' +
' </ul>' +
'</div>';
// 커스텀 오버레이가 표시될 위치입니다
var position = new kakao.maps.LatLng(37.49887, 127.026581);
// 커스텀 오버레이를 생성합니다
var customOverlay = new kakao.maps.CustomOverlay({
position: position,
content: content,
xAnchor: 0.3,
yAnchor: 0.91
});
// 커스텀 오버레이를 지도에 표시합니다
customOverlay.setMap(map);
</script>
</body>
<style>
.overlaybox {position:relative;width:360px;height:350px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/box_movie.png') no-repeat;padding:15px 10px;}
.overlaybox div, ul {overflow:hidden;margin:0;padding:0;}
.overlaybox li {list-style: none;}
.overlaybox .boxtitle {color:#fff;font-size:16px;font-weight:bold;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png') no-repeat right 120px center;margin-bottom:8px;}
.overlaybox .first {position:relative;width:247px;height:136px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/thumb.png') no-repeat;margin-bottom:8px;}
.first .text {color:#fff;font-weight:bold;}
.first .triangle {position:absolute;width:48px;height:48px;top:0;left:0;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/triangle.png') no-repeat; padding:6px;font-size:18px;}
.first .movietitle {position:absolute;width:100%;bottom:0;background:rgba(0,0,0,0.4);padding:7px 15px;font-size:14px;}
.overlaybox ul {width:247px;}
.overlaybox li {position:relative;margin-bottom:2px;background:#2b2d36;padding:5px 10px;color:#aaabaf;line-height: 1;}
.overlaybox li span {display:inline-block;}
.overlaybox li .number {font-size:16px;font-weight:bold;}
.overlaybox li .title {font-size:13px;}
.overlaybox ul .arrow {position:absolute;margin-top:8px;right:25px;width:5px;height:3px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/updown.png') no-repeat;}
.overlaybox li .up {background-position:0 -40px;}
.overlaybox li .down {background-position:0 -60px;}
.overlaybox li .count {position:absolute;margin-top:5px;right:15px;font-size:10px;}
.overlaybox li:hover {color:#fff;background:#d24545;}
.overlaybox li:hover .up {background-position:0 0px;}
.overlaybox li:hover .down {background-position:0 -20px;}
</style>
</html>
보조기억장치