다음맵 여러군대 찍히도록 만들기
<html decorator="content_layout">
<head>
<link rel="stylesheet" type="text/css" href="/resources/restaurantguide/css/style.css">
<link rel="stylesheet" type="text/css" href="/resources/restaurantguide/css/vendors/uniform.default.css">
<link rel="stylesheet" type="text/css" href="/resources/restaurantguide/css/vendors/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="/resources/restaurantguide/css/vendors/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="/resources/restaurantguide/css/vendors/selectric.css">
<style>
.wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
.wrap * {padding: 0;margin: 0;}
.wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
.wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
.info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
.info .close:hover {cursor: pointer;}
.info .body {position: relative;overflow: hidden;}
.info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
.info .link {color: #5085BB;}
</style>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${mapAppKey}&libraries=services,clusterer,drawing"></script>
<script type="text/javascript">
$(document).ready(function() {
var mapContainer = document.getElementById('map');
var mapOption = {
center : new daum.maps.LatLng(37.568510, 126.981612), // 지도의 중심좌표
level : 5 // 지도의 확대 레벨
};
// 지도를 생성합.
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체 생성.
var geocoder = new daum.maps.services.Geocoder();
var listData = [];
var mapData = new HashMap();
<c:forEach var="item" items="${customList}" varStatus="status">
mapData.put("title", '${item.title}');
mapData.put("addr", '${item.addr}');
mapData.put("tel", '${item.tel}');
mapData.put("fileNm", '${item.fileNm}');
mapData.put("homePageUrl", '${item.homePageUrl}');
listData['${status.index}'] = mapData;
mapData = new HashMap();
</c:forEach>
listData.forEach(function(listData, index) {
var kr_name = listData.get("title");
var addr = listData.get("addr");
var tel = listData.get("tel");
var fileNm = listData.get("fileNm");
var homePageUrl = listData.get("homePageUrl");
// 주소로 좌표를 검색
geocoder.addressSearch(addr, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var latlng = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map : map,
position : latlng
});
var customOverlay = new daum.maps.CustomOverlay({
position : latlng,
clickable : true
});
var content = contentMake(tel, addr, kr_name, customOverlay, fileNm, homePageUrl);
customOverlay.setContent(content);
customOverlay.setMap(map);
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
daum.maps.event.addListener(marker, 'click', function() {
customOverlay.setMap(null);
});
function contentMake(tel, addr, kr_name, customOverlay, fileNm, homePageUrl) {
var contentInfo = document.createElement('div');
contentInfo.classList.add("wrap");
var info = document.createElement('div');
info.classList.add("info");
contentInfo.appendChild(info);
var title = document.createElement('div');
title.classList.add("title");
var close = document.createElement('div');
close.classList.add("close");
close.setAttribute("onclick", "closeOverlay();");
close.onclick = function() {
customOverlay.setMap(null);
$(this).parent().removeArttr("href");
};
close.setAttribute("title", "닫기");
var body = document.createElement('div');
body.classList.add("body");
var img = document.createElement('div');
img.classList.add("img");
var elem = document.createElement("img");
elem.setAttribute("src", '/resources/img/restaurant_guide/' + fileNm + '.jpg');
elem.setAttribute("height", "70");
elem.setAttribute("width", "73");
img.appendChild(elem);
var desc = document.createElement('div');
desc.classList.add("desc");
var ellipsis = document.createElement('div');
ellipsis.classList.add("ellipsis");
ellipsis.appendChild(document.createTextNode(addr));
ellipsis.setAttribute("onclick", "clickInfo();");
ellipsis.onclick = function() {
location.href = "/kr/board/${bbsType}/view/${bbsId}?krName="+kr_name+"&fileName="+fileNm+"&menuId=${param.menuId}";
};
var jibun = document.createElement('div');
jibun.classList.add("jibun");
jibun.classList.add("ellipsis");
jibun.appendChild(document.createTextNode('대표번호 : ' + tel));
jibun.setAttribute("onclick", "clickInfo();");
jibun.onclick = function() {
location.href = "/kr/board/${bbsType}/view/${bbsId}?krName="+kr_name+"&fileName="+fileNm+"&menuId=${param.menuId}";
};
var link = document.createElement('a');
link.classList.add("link");
if(homePageUrl != '') {
link.appendChild(document.createTextNode('홈페이지 정보'));
link.setAttribute("href", homePageUrl);
} else {
link.appendChild(document.createTextNode('레스토랑 정보'));
link.setAttribute("href", "/kr/board/${bbsType}/view/${bbsId}?krName="+kr_name+"&fileName="+fileNm+"&menuId=${param.menuId}");
}
var etc = document.createElement('div');
etc.appendChild(link);
desc.appendChild(ellipsis);
desc.appendChild(jibun);
desc.appendChild(etc);
body.appendChild(img);
body.appendChild(desc);
info.appendChild(title);
info.appendChild(body);
title.appendChild(document.createTextNode(kr_name));
title.appendChild(close);
return contentInfo;
}
}
});
});
});
HashMap = function(){
this.map = new Array();
};
HashMap.prototype = {
put : function(key, value){
this.map[key] = value;
},
get : function(key){
return this.map[key];
},
getAll : function(){
return this.map;
},
clear : function(){
this.map = new Array();
},
getKeys : function() {
var keys = new Array();
for(i in this.map){
keys.push(i);
}
return keys;
}
};
</script>
'Web > 현업 경험' 카테고리의 다른 글
| Mybatis 와 ibatis 별 동적 태그 (0) | 2019.04.05 |
|---|---|
| [Front] js/css 파일 캐시 방지 (0) | 2019.04.05 |
| 휴면계정 자동 전환 기능 설계 (0) | 2018.04.26 |
| AP와 DB서버 JDBC 드라이버로 통신 로그 쌓이는 프로그램 (0) | 2018.02.13 |
| 오라클 외부 접근 가능하도록 설정하기 (0) | 2017.02.23 |