CSS, 카카오 sample 지도, 목록
- Web/CSS
- 2021. 11. 10.
CSS, 카카오 SAMPLE 지도 목록
내용
https://apis.map.kakao.com/web/sample/keywordList/
본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다.
문단제목
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>키워드로 장소검색하고 목록으로 표출하기</title>
<style>
.map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
.map_wrap {position:relative;width:100%;height:500px;}
#menu_wrap {position:absolute;top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
.bg_white {background:#fff;}
#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}
#menu_wrap .option{text-align: center;}
#menu_wrap .option p {margin:10px 0;}
#menu_wrap .option button {margin-left:5px;}
#placesList li {list-style: none;}
#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
#placesList .item span {display: block;margin-top:4px;}
#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#placesList .item .info{padding:10px 0 10px 15px;}
#placesList .info .gray {color:#8a8a8a;}
#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
#placesList .info .tel {color:#009900;}
#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}
#pagination {margin:10px auto;text-align: center;}
#pagination a {display:inline-block;margin-right:10px;}
#pagination .on {font-weight: bold; cursor: default;color:#777;}
</style>
</head>
<body>
<div class="map_wrap">
<div id="map" style="width:100%;height:100%;position:relative;overflow:hidden; background-color:#fffd70;"></div>
<div id="menu_wrap" class="bg_white">
<div class="option">
<div>
<form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" value="이태원 맛집" id="keyword" size="15">
<button type="submit">검색하기</button>
</form>
</div>
</div>
<hr>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</div>
</body>
<script>
window.onload = function() {
startFun();
}
function startFun() {
var listEl = document.getElementById('placesList'),
menuEl = document.getElementById('menu_wrap'),
fragment = document.createDocumentFragment(),
listStr = '';
removeAllChildNods(listEl);
for(var i=0; i < 1; i++) {
var itemEl = getListItem(1, 'test');
fragment.appendChild(itemEl);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
console.log('test');
var el = document.createElement('li'),
itemStr = //'<span class="markerbg marker_' + (index+1) + '"></span>' +
'<div class="info">' +
' <h5>' + places + '</h5>';
if (places) {
itemStr += ' <span>' + places + '</span>' +
' <span class="jibun gray">' + places + '</span>';
} else {
itemStr += ' <span>' + places + '</span>';
}
itemStr += ' <span class="tel">' + places + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
console.log('?');
return el;
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild (el.lastChild);
}
}
</script>
</html>카카오가 제공하는 지도 sample이 마음에 들어서 필요한 부분만 뜯어서 만들게 되었습니다.
지금 갖고 있는 지도 css에 적용하기에 매우 좋아보입니다.
반응형
'Web > CSS' 카테고리의 다른 글
| CSS, 지도 검색 목록 만들기 (0) | 2021.11.11 |
|---|---|
| [CSS ] display 감추기, 보이기 (0) | 2021.09.14 |
| [CSS] CSS의 기초 (0) | 2021.04.27 |