-
Notifications
You must be signed in to change notification settings - Fork 0
Map Page script
Kim HyunWoo edited this page Mar 8, 2021
·
2 revisions
Map UI css
.area {
width: 65px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
background-size: contain;
}
.area .name {
text-align: center;
font-size: 0.7em;
}
.area .cnt {
text-align: center;
font-size: 1.3em;
font-weight: bold;
padding-top: 5px;
}
.marker {
width: 60px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
background-size: contain;
}
.marker .name {
text-align: center;
font-size: 0.7em;
}
.marker .cnt {
text-align: center;
white-space:pre-line;
font-size: 0.85em;
font-weight: bold;
}
.marker .img {
width: 16px;
height: 16px;
position: absolute;
left: 55px;
top: -6px;
border-radius: 8px;
}
@media (max-width: 1199px) {
#container {
overflow: hidden;
height: 600px;
position: relative;
}
#mapWrapper {
width: 100%;
height: 600px;
z-index: 1;
}
#rvWrapper {
width: 100%;
height: 600px;
top: 0;
right: 0;
position: absolute;
z-index: 0;
}
#container.view_roadview #mapWrapper {
height: 50%;
}
}
@media (min-width: 1200px) {
#container {
overflow: hidden;
height: 600px;
position: relative;
}
#mapWrapper {
width: 100%;
height: 600px;
z-index: 1;
}
#rvWrapper {
width: 50%;
height: 600px;
top: 0;
right: 0;
position: absolute;
z-index: 0;
}
#container.view_roadview #mapWrapper {
width: 50%;
}
}
#resetControl {
position: absolute;
cursor: pointer;
z-index: 2;
top: 10px;
right: 3px;
width: 52px;
height: 52px;
object-fit: contain;
}
#resetControl:active {
content: url("http://hsjt03233.cafe24.com/bizdemo87846/img/widget/reset/resetOver/resetOver.png");
}
.resetTooltip {
visibility: hidden;
position: absolute;
z-index: 2;
top: 15px;
right: 55px;
width: 96px;
height: 34px;
object-fit: contain;
}
#resetControl:hover +.resetTooltip {
visibility: visible;
}
#custom_zoomcontrol_plus {
position: absolute;
cursor: pointer;
z-index: 1;
top: 70px;
right: 3px;
width: 52px;
height: 52px;
object-fit: contain;
}
.plusTooltip {
visibility: hidden;
position: absolute;
z-index: 2;
top: 75px;
right: 55px;
width: 96px;
height: 34px;
object-fit: contain;
}
#custom_zoomcontrol_plus:hover +.plusTooltip {
visibility: visible;
}
#custom_zoomcontrol_plus:active {
content: url("http://hsjt03233.cafe24.com/bizdemo87846/img/widget/plus/plusOver/group-11.png");
}
#custom_zoomcontrol_minus {
position: absolute;
cursor: pointer;
z-index: 1;
top: 130px;
right: 3px;
width: 52px;
height: 52px;
object-fit: contain;
}
.minusTooltip {
visibility: hidden;
position: absolute;
z-index: 2;
top: 135px;
right: 55px;
width: 96px;
height: 34px;
object-fit: contain;
}
#custom_zoomcontrol_minus:hover +.minusTooltip {
visibility: visible;
}
#custom_zoomcontrol_minus:active {
content: url("http://hsjt03233.cafe24.com/bizdemo87846/img/widget/minus/minusOver/group-10.png");
}
#roadviewControl {
position: absolute;
cursor: pointer;
z-index: 1;
top: 190px;
right: 3px;
width: 55px;
height: 55px;
object-fit: contain;
/* border-radius: 10px;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.27);
border: solid 1px #c1c1c1;
background-color: #f67c7c; */
}
#roadviewControl.active {
content: url("http://hsjt03233.cafe24.com/bizdemo87846/img/widget/roadview/roadviewOver/roadviewOver.png");
}
.roadviewTooltip {
visibility: hidden;
position: absolute;
z-index: 2;
top: 195px;
right: 55px;
width: 96px;
height: 34px;
object-fit: contain;
}
#roadviewControl:hover +.roadviewTooltip {
visibility: visible;
}
#close {
position: absolute;
padding: 4px;
top: 5px;
left: 5px;
cursor: pointer;
background: #fff;
border-radius: 4px;
border: 1px solid #c8c8c8;
box-shadow: 0 1px #888;
}
#close .img {
display: block;
background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/rv_close.png") no-repeat;
width: 14px;
height: 14px;
}
LIB HTML
<script src="https://cdn.jsdelivr.net/gh/jcubic/static@master/js/iconv.js"></script>
<link rel="stylesheet" href="/bizdemo87846/inc/css/mapUI.css">
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2befa4c2ccbf24ac6c3bec24f23abb28"></script>
<script charset="UTF-8" src="http://t1.daumcdn.net/mapjsapi/js/main/4.3.2/kakao.js"></script>
MAP HTML
<div id="container" style="margin-top:120px">
<!-- 로드뷰를 표시할 div 입니다 -->
<div id="rvWrapper">
<div id="roadview" style="width: 100%; height: 100%; position: relative; overflow: hidden; background: url("http://t1.daumcdn.net/mapjsapi/images/bg_tile.png");"><div style="overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;margin:0;border:0;padding:0"></div><div style="position: absolute; z-index: 1; width: 100%; height: 0px; transform: translateZ(0px); top: 0px;"></div></div>
<div id="close" title="로드뷰닫기" onclick="closeRoadview()">
<span class="img"></span>
</div>
</div>
<!-- 지도를 표시할 div 입니다 -->
<div id="mapWrapper">
<div id="kakaoMap" style="width: 100%; height: 100%; position: relative; overflow: hidden; background: url("http://t1.daumcdn.net/mapjsapi/images/bg_tile.png");"></div>
<!-- 지도 위치를 초기화할 위젯 img 입니다-->
<img id="resetControl" src="http://hsjt03233.cafe24.com/bizdemo87846/img/widget/reset/reset.png" onclick="reset()">
<!-- 초기화 위젯 툴팁 img 입니다-->
<img class="resetTooltip" src="http://hsjt03233.cafe24.com/bizdemo87846/img/widget/reset/reset_tooltip/group-6.png" srcset="http://hsjt03233.cafe24.com/bizdemo87846/img/widget/reset/reset_tooltip/group-6@2x.png,
http://hsjt03233.cafe24.com/bizdemo87846/img/widget/reset/reset_tooltip/group-6@3x.png">
<!-- 지도 확대 컨트롤 위젯 img 입니다 -->
<img id="custom_zoomcontrol_plus" src="/bizdemo87846/img/widget/plus/group-4.png" srcset="/bizdemo87846/img/widget/plus/group-4@2x.png 2x,
/bizdemo87846/img/widget/plus/group-4@3x.png 3x" onclick="zoomIn()">
<!-- 확대 위젯 툴팁 img 입니다-->
<img class="plusTooltip" src="/bizdemo87846/img/widget/plus/plus_tooltip/group-7.png" srcset="/bizdemo87846/img/widget/plus/plus_tooltip/group-7@2x.png 2x,
/bizdemo87846/img/widget/plus/plus_tooltip/group-7@3x.png 3x">
<!-- 지도 축소 컨트롤 위젯 img 입니다 -->
<img id="custom_zoomcontrol_minus" src="/bizdemo87846/img/widget/minus/group-13.png" srcset="/bizdemo87846/img/widget/minus/group-13@2x.png 2x,
/bizdemo87846/img/widget/minus/group-13@3x.png 3x" onclick="zoomOut()">
<!-- 축소 위젯 툴팁 img 입니다-->
<img class="minusTooltip" src="/bizdemo87846/img/widget/minus/minus_tooltip/group-8.png" srcset="/bizdemo87846/img/widget/minus/minus_tooltip/group-8@2x.png 2x,
/bizdemo87846/img/widget/minus/minus_tooltip/group-8@3x.png 3x">
<!-- 로드뷰 전환 위젯 img 입니다-->
<img id="roadviewControl" src="/bizdemo87846/img/widget/roadview/roadview.png" onclick="setRoadviewRoad()">
<!-- 로드뷰 위젯 툴팁 img 입니다-->
<img class="roadviewTooltip" src="/bizdemo87846/img/widget/roadview/roadview_tooltip/group-9.png" srcset="/bizdemo87846/img/widget/roadview/roadview_tooltip/group-9@2x.png 2x,
/bizdemo87846/img/widget/roadview/roadview_tooltip/group-9@3x.png 3x">
</div>
</div>
MAP Script
<script>
// 해당 페이지 URL 디코딩
let getURL = document.URL;
let searchIDX = new URL(getURL);
// console.log(searchIDX.searchParams.get('idx'));
let getStr = [];
regexp = /(%[[0-9A-F]{2}]*)/g;
array = [...getURL.matchAll(regexp)].map(i => i[0].replace('%', '0x'));
stack = [];
decArray = [];
array
.map(i => parseInt(i, 16))
.forEach(i => {
// console.log(i, stack);
if (i > 127) {
stack.push(i);
}
if (stack.length >= 2) {
decArray.push(stack.map(i => i));
stack.length = 0;
}
if (i <= 127) {
decArray.push(i);
}
});
// console.log(array, decArray);
decArray.forEach(buff => {
// console.log(buff);
if (typeof buff == 'object') {
// console.log(iconv.decode(Buffer.from(buff), 'CP949'));
getStr.push(iconv.decode(Buffer.from(buff), 'CP949'));
} else {
// console.log(String.fromCharCode(buff));
getStr.push(String.fromCharCode(buff));
}
});
// console.log(getStr);
let typeString = getStr.join('');
// console.log(typeString);
// 마지막으로 조회된 지도 위치 (로컬 스토리지 이용)
let lat,
lot;
if (getURL.indexOf('goods_2') != -1) { // 해당 if문은 상세 매물 페이지 조회 시 해당 매물 위치를 알기 위한 조건 처리
let getIDX = searchIDX.searchParams.get('idx');
// console.log(getIDX);
$
.ajax({
async: false,
method: "POST",
dataType: "json",
url: "https://foilemap.co.kr/forsale/map",
contentType: "application/json",
data: JSON.stringify({
"lat": 0,
"lot": 0,
"distance": 0,
"page": 0,
"printSize": 987654321,
"cafe24IDX": getIDX
}),
error: function (e) {
console.log('Error...', e);
}
})
.done(function (params) {
// console.log(params);
$.each(params.data, function (index, val) {
lat = val.lat;
lot = val.lot;
// console.log(lat, lot);
});
});
} else if (!localStorage.getItem('lat') && !localStorage.getItem('lot')) {
lat = 37.565694;
lot = 126.977139;
} else {
lat = localStorage.getItem('lat');
lot = localStorage.getItem('lot');
}
// 마지막으로 조회된 지도 줌 레벨 값 (로컬 스토리지 이용)
let mapLevel;
if (getURL.indexOf('goods_2') != -1) { // 해당 if문은 상세 매물 페이지 조회 시 해당 매물 위치를 보이기 위한 줌 값 설정
mapLevel = 1;
} else if(!localStorage.getItem('level')) {
mapLevel = 10;
} else {
mapLevel = localStorage.getItem('level');
}
let map = new kakao
.maps
.Map(document.getElementById('kakaoMap'), {
// 지도를 표시할 div
center: new kakao
.maps
.LatLng(lat, lot), // 초기 지도의 중심좌표
level: mapLevel, // 초기 지도의 확대 레벨
disableDoubleClickZoom: true, // 지도에 더블클릭 방지
});
// console.log("초기 지도 줌 레벨 값은 :", map.getLevel());
// 지도 스크롤 줌 액션 잠금
map.setZoomable(false);
// 지도 축소 최대 값 설정
map.setMaxLevel(12);
// 지도의 중심좌표 변수
let mapCenter = map.getCenter();
// 지도의 타입 변수
let mapType;
let overlayOn = false, // 지도 위에 로드뷰 오버레이가 추가된 상태를 가지고 있을 변수
container = document.getElementById('container'), // 지도와 로드뷰를 감싸고 있는 div 입니다
mapWrapper = document.getElementById('mapWrapper'), // 지도를 감싸고 있는 div 입니다
mapContainer = document.getElementById('map'), // 지도를 표시할 div 입니다
rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div 입니다
// 초기 지도 줌 레벨 값에 따른 폴리곤 렌더링
if (mapLevel >= 10) {
mapUnit(mapCenter, 'ctp');
}
if (mapLevel >= 8 && mapLevel < 10) {
mapUnit(mapCenter, 'sig');
}
if (mapLevel >= 6 && mapLevel < 8) {
mapUnit(mapCenter, 'emd');
}
if (mapLevel <= 4) {
mapCnt();
}
// 지도에 줌 이벤트가 발생하였을 때
kakao
.maps
.event
.addListener(map, 'zoom_changed', function () {
// 지도의 현재 중심좌표를 얻어옵니다
mapCenter = map.getCenter();
// 지도의 현재 줌 레벨값을 얻어옵니다
mapLevel = map.getLevel();
// console.log("현재 지도 줌 레벨 값은 :", mapLevel);
// 마지막 위치 값 저장
localStorage.setItem('lat', mapCenter.getLat());
localStorage.setItem('lot', mapCenter.getLng());
// 마지막 줌 값 저장
localStorage.setItem('level', mapLevel);
// 레벨이 10 이상인 경우 시도 단위로 폴리곤 렌더링
if (mapLevel >= 10) {
deletePolygon(polygons);
mapUnit(mapCenter, 'ctp');
}
// 레벨이 8이상 10미만 경우 시군구 단위로 폴리곤 렌더링
if (mapLevel >= 8 && mapLevel < 10) {
deletePolygon(polygons);
mapUnit(mapCenter, 'sig');
}
// 레벨이 6이상 8미만 경우 읍면동 단위로 폴리곤 렌더링
if (mapLevel >= 6 && mapLevel < 8) {
deletePolygon(polygons);
mapUnit(mapCenter, 'emd');
}
//레벨이 4이하 경우 거리 단위 이므로 해당 지역 관련 마커 렌더링
if (mapLevel <= 4) {
deletePolygon(polygons);
mapCnt();
}
});
// 지도에 드래그 이벤트가 발생하였을 때
kakao
.maps
.event
.addListener(map, 'dragend', function () {
mapCenter = map.getCenter();
mapLevel = map.getLevel();
// 마지막 위치 값 저장
localStorage.setItem('lat', mapCenter.getLat());
localStorage.setItem('lot', mapCenter.getLng());
// 마지막 줌 값 저장
localStorage.setItem('level', mapLevel);
// 드래그 이벤트로 인한 새로운 지도 모습에 중심좌표를 기점으로 새 폴리곤 및 UI 렌더링
if (mapLevel > 4) {
deletePolygon(polygons);
mapUnit(mapCenter, mapType);
} else {
// 거리 단위 이므로 새 마커 렌더링
mapCnt();
}
});
// 지도 단위에 따른 관리자 페이지 API 'geo' 호출 함수
function mapUnit(map_center, map_type) {
// 사용자 지도 화면 중심 좌표와 검색 범위를 해당 API 요청값으로 넘겨 폴리곤 그리고 UI 렌더링 함수에 이용
if (map_type == "ctp") {
$
.ajax({
method: "GET",
dataType: "json",
url: "https://foilemap.co.kr/geo",
data: {
lat: map_center.getLat(),
lot: map_center.getLng(),
distance: '200',
map: map_type
},
error: function (e) {
console.log('Error:', e);
}
})
.done(function (params) {
// console.log(params);
let data = params.data;
let coordinates = [];
let getData = [];
let getCD = [];
$.each(data, function (index, val) {
mapType = val.map_type;
coordinates = val.coordinates;
getData.push({
center: [
val.center_lat, val.center_lot
],
name: val.KOR_NM,
cd: val.CD,
color: val.color,
backgroundColor: val.backgroundColor,
guid: "https://foilemap.co.kr" + val.guid
});
getCD.push(val.CD);
// console.log(coordinates);
display(coordinates);
});
mapCnt(getCD, getData);
});
} else if (map_type == "sig") {
$
.ajax({
method: "GET",
dataType: "json",
url: "https://foilemap.co.kr/geo",
data: {
lat: map_center.getLat(),
lot: map_center.getLng(),
distance: '40',
map: map_type
},
error: function (e) {
console.log('Error:', e);
}
})
.done(function (params) {
// console.log(params);
let data = params.data;
let coordinates = [];
let getData = [];
let getCD = [];
$.each(data, function (index, val) {
mapType = val.map_type;
coordinates = val.coordinates;
getData.push({
center: [
val.center_lat, val.center_lot
],
name: val.KOR_NM,
cd: val.CD,
color: val.color,
backgroundColor: val.backgroundColor,
guid: "https://foilemap.co.kr" + val.guid
});
getCD.push(val.CD);
// console.log(coordinates);
display(coordinates);
});
mapCnt(getCD, getData);
});
} else if (map_type == "emd") {
$
.ajax({
method: "GET",
dataType: "json",
url: "https://foilemap.co.kr/geo",
data: {
lat: map_center.getLat(),
lot: map_center.getLng(),
distance: '5',
map: map_type
},
error: function (e) {
console.log('Error:', e);
}
})
.done(function (params) {
// console.log(params);
let data = params.data;
let coordinates = [];
let getData = [];
let getCD = [];
$.each(data, function (index, val) {
mapType = val.map_type;
coordinates = val.coordinates;
getData.push({
center: [
val.center_lat, val.center_lot
],
name: val.KOR_NM,
cd: val.CD,
color: val.color,
backgroundColor: val.backgroundColor,
guid: "https://foilemap.co.kr" + val.guid
});
getCD.push(val.CD);
// console.log(coordinates);
display(coordinates);
});
mapCnt(getCD, getData);
});
}
}
let polygons = []; // 지도 줌 이벤트 시 폴리곤 제거를 위한 배열
// 폴리곤 렌더링 함수
function display(coordinates) {
let path = [];
// console.log(coordinates.length);
$.each(coordinates, function (index, coordinate) {
let paths = [];
$.each(coordinate, function (index, coord) {
paths.push(new kakao.maps.LatLng(coord.lat, coord.lot));
});
path.push(paths);
});
let polygon = new kakao
.maps
.Polygon({
map: map,
path: path,
strokeWeight: 2,
strokeColor: '#004c80',
strokeOpacity: 0.8,
// strokeStyle: 'dashed',
fillColor: '#fff',
fillOpacity: 0.3
});
polygons.push(polygon);
// 다각형에 mouseover 이벤트를 등록하고 이벤트가 발생하면 폴리곤의 채움색을 변경합니다 지역명을 표시하는 커스텀오버레이를 지도위에
// 표시합니다
kakao
.maps
.event
.addListener(polygon, 'mouseover', function () {
polygon.setOptions({fillColor: '#09f'});
});
kakao
.maps
.event
.addListener(polygon, 'mouseout', function () {
polygon.setOptions({fillColor: '#fff'});
});
};
// 행정구역 매물 관련 괸리자 페이지 API 'forsale' 호출 함수
function mapCnt(getCD, getData) {
// console.log(getCD, getData);
// 파라미터 값이 없을 경우 즉 현재 지도 줌 레벨이 거리 단위임을 뜻 함
if (getCD === undefined && getData === undefined) {
$
.ajax({
method: "POST",
dataType: "json",
url: "https://foilemap.co.kr/forsale/map",
contentType: "application/json",
data: JSON.stringify({
"lat": mapCenter.getLat(),
"lot": mapCenter.getLng(),
"distance": 3,
"page": 0,
"printSize": 987654321,
"houseType": typeString
}),
error: function (e) {
console.log('Error...', e);
}
})
.done(function (params) {
// console.log(params);
// 매물 하나 당 UI 렌더링 및 클릭 시 해당 메물 페이지로 이동
$.each(params.data, function (index, val) {
// console.log(val, index);
let customOverlay = new kakao
.maps
.CustomOverlay({}); // 해당 매물 관련 UI를 표시할 오버레이
let content = document.createElement('div');
content.className = 'marker';
content.style.backgroundImage = "url( https://foilemap.co.kr" + val.ht_guid +
")";
content.style.color = val.ht_color;
content.style.backgroundColor = val.ht_bgColor;
content.innerHTML = '<div class="img" style="background-image: url(https://foilemap.co.kr' +
val.op_guid + '"></div><div class="name">' + val.houseType + '</div><div class=' +
'"cnt">' + (
val.adminMemo || val.houseName
) + '</div></div>';
// console.log(content);
customOverlay.setContent(content);
customOverlay.setPosition(new kakao.maps.LatLng(val.lat, val.lot));
customOverlay.setMap(map);
addEventHandle(content, 'click', ClickUI(val.cafe24IDX));
// 지도에 줌, 드래그 이벤트 시 기존 마커는 제거
kakao
.maps
.event
.addListener(map, 'zoom_changed', function () {
customOverlay.setMap(null);
});
kakao
.maps
.event
.addListener(map, 'dragend', function () {
customOverlay.setMap(null);
});
});
});
} else {
let CDstring = getCD.join(','); // CD 배열을 문자열로 변환
// 지도 단위별로 파라미터 값들을 주어 해당 행정구역의 이름과 매물 갯수를 UI에 출력
if (mapType == 'ctp') {
$
.ajax({
method: "POST",
dataType: "json",
url: "https://foilemap.co.kr/forsale/map",
contentType: "application/json",
data: JSON.stringify({
"lat": mapCenter.getLat(),
"lot": mapCenter.getLng(),
"distance": 200,
"geoCDS": CDstring,
"map": mapType,
"page": 0,
"printSize": 987654321,
"houseType": typeString
}),
error: function (e) {
console.log('Error...', e);
}
})
.done(function (params) {
let result = params.data;
// console.log(result);
$.each(getData, function (index, val) {
// console.log(val);
let cntIndex = result.findIndex(i => i.addr_CD_1 == val.cd);
if (cntIndex != -1) {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
result[cntIndex].cnt,
val.color,
val.backgroundColor,
val.guid
);
} else {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
0,
val.color,
val.backgroundColor,
val.guid
);
}
});
});
} else if (mapType == 'sig') {
$
.ajax({
method: "POST",
dataType: "json",
url: "https://foilemap.co.kr/forsale/map",
contentType: "application/json",
data: JSON.stringify({
"lat": mapCenter.getLat(),
"lot": mapCenter.getLng(),
"distance": 40,
"geoCDS": CDstring,
"map": mapType,
"page": 0,
"printSize": 987654321,
"houseType": typeString
}),
error: function (e) {
console.log('Error...', e);
}
})
.done(function (params) {
let result = params.data;
// console.log(result);
$.each(getData, function (index, val) {
// console.log(val);
let cntIndex = result.findIndex(i => i.addr_CD_2 == val.cd);
if (cntIndex != -1) {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
result[cntIndex].cnt,
val.color,
val.backgroundColor,
val.guid
);
} else {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
0,
val.color,
val.backgroundColor,
val.guid
);
}
});
});
} else if (mapType == 'emd') {
$
.ajax({
method: "POST",
dataType: "json",
url: "https://foilemap.co.kr/forsale/map",
contentType: "application/json",
data: JSON.stringify({
"lat": mapCenter.getLat(),
"lot": mapCenter.getLng(),
"distance": 5,
"geoCDS": CDstring,
"map": mapType,
"page": 0,
"printSize": 987654321,
"houseType": typeString
}),
error: function (e) {
console.log('Error...', e);
}
})
.done(function (params) {
let result = params.data;
// console.log(result);
$.each(getData, function (index, val) {
// console.log(val);
let cntIndex = result.findIndex(i => i.addr_CD_3 == val.cd);
if (cntIndex != -1) {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
result[cntIndex].cnt,
val.color,
val.backgroundColor,
val.guid
);
} else {
displayInfo(
new kakao.maps.LatLng(val.center[0], val.center[1]),
val.name,
0,
val.color,
val.backgroundColor,
val.guid
);
}
});
});
}
}
}
// 행정구역 UI 렌더링 함수
function displayInfo(center, name, cnt, color, backgroundColor, guid) {
// console.log(center, name, cnt);
let customOverlay = new kakao
.maps
.CustomOverlay({}); // 해당 지역 관련 UI를 표시할 오버레이
let content = document.createElement('div');
content.className = 'area';
content.style.backgroundImage = "url(" + guid + ")";
content.style.color = color;
content.style.backgroundColor = backgroundColor;
content.innerHTML = '<div class="name">' + name +
'</div><div class="cnt">' + cnt + '개</div></div>';
// console.log(content);
customOverlay.setContent(content);
customOverlay.setPosition(center);
customOverlay.setMap(map);
addEventHandle(content, 'click', onMouseClick(center));
// 줌 이벤트, 드래그 이벤트가 있을 때 마다 기존의 UI는 제거
kakao
.maps
.event
.addListener(map, 'zoom_changed', function () {
customOverlay.setMap(null);
});
kakao
.maps
.event
.addListener(map, 'dragend', function () {
customOverlay.setMap(null);
});
}
// 지도 줌, 드래그 이벤트에 따른 기존 폴리곤 제거
function deletePolygon(polygons) {
for (let index = 0; index < polygons.length; index++) {
polygons[index].setMap(null);
}
}
// 행정구역 UI를 클릭 했을 때 호출되는 핸들러 입니다
function onMouseClick(center) {
return function () {
// console.log('click'); UI 클릭 시 지도 줌 이벤트 활성
map.setLevel(map.getLevel() - 2, {
anchor: center,
animate: {
duration: 350
}
});
deletePolygon(polygons);
};
}
// 매물 UI를 클릭 했을 때 호출되는 핸들러 입니다
function ClickUI(cafe24idx) {
return function () {
window.location.href = "http://www.folie.co.kr/bizdemo87846/goods/goods_2.php?type=recomm&mode=view&id" +
"x=" + cafe24idx;
// console.log('클릭된 매물 정보는 : ', cafe24idx);
}
}
// target node에 이벤트 핸들러를 등록하는 함수힙니다
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
} else {
target.attachEvent('on' + type, callback);
}
}
// 초기화 버튼 클릭 시 지도 위치 초기화
function reset() {
lat = 37.565694;
lot = 126.977139;
localStorage.setItem('lat', lat);
localStorage.setItem('lot', lot);
map.setCenter(new kakao.maps.LatLng(lat, lot));
mapCenter = map.getCenter();
mapLevel = 10;
map.setLevel(mapLevel);
deletePolygon(polygons);
mapUnit(mapCenter, 'ctp');
}
// 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomIn() {
map.setLevel(map.getLevel() - 2);
}
// 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomOut() {
if (mapLevel == 1) {
map.setLevel(2);
} else {
map.setLevel(map.getLevel() + 2);
}
}
// 로드뷰 객체를 생성합니다
let rv = new kakao
.maps
.Roadview(rvContainer);
// 좌표로부터 로드뷰 파노라마 ID를 가져올 로드뷰 클라이언트 객체를 생성합니다
let rvClient = new kakao
.maps
.RoadviewClient();
// 로드뷰에 좌표가 바뀌었을 때 발생하는 이벤트를 등록합니다
kakao
.maps
.event
.addListener(rv, 'position_changed', function () {
// 현재 로드뷰의 위치 좌표를 얻어옵니다
let rvPosition = rv.getPosition();
// 지도의 중심을 현재 로드뷰의 위치로 설정합니다
map.setCenter(rvPosition);
// 지도 위에 로드뷰 도로 오버레이가 추가된 상태이면
if (overlayOn) {
// 마커의 위치를 현재 로드뷰의 위치로 설정합니다
marker.setPosition(rvPosition);
}
});
// 마커 이미지를 생성합니다
let markImage = new kakao
.maps
.MarkerImage(
'https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_201' +
'8.png',
new kakao.maps.Size(26, 46),
{
// 스프라이트 이미지를 사용합니다. 스프라이트 이미지 전체의 크기를 지정하고
spriteSize: new kakao
.maps
.Size(1666, 168),
// 사용하고 싶은 영역의 좌상단 좌표를 입력합니다. background-position으로 지정하는 값이며 부호는 반대입니다.
spriteOrigin: new kakao
.maps
.Point(705, 114),
offset: new kakao
.maps
.Point(13, 46)
}
);
// 드래그가 가능한 마커를 생성합니다
let marker = new kakao
.maps
.Marker({image: markImage, position: mapCenter, draggable: true});
// 마커에 dragend 이벤트를 등록합니다
kakao
.maps
.event
.addListener(marker, 'dragend', function (mouseEvent) {
// 현재 마커가 놓인 자리의 좌표입니다
let position = marker.getPosition();
// 마커가 놓인 위치를 기준으로 로드뷰를 설정합니다
toggleRoadview(position);
});
//지도에 클릭 이벤트를 등록합니다
kakao
.maps
.event
.addListener(map, 'click', function (mouseEvent) {
// 지도 위에 로드뷰 도로 오버레이가 추가된 상태가 아니면 클릭이벤트를 무시합니다
if (!overlayOn) {
return;
}
// 클릭한 위치의 좌표입니다
let position = mouseEvent.latLng;
// 마커를 클릭한 위치로 옮깁니다
marker.setPosition(position);
// 클락한 위치를 기준으로 로드뷰를 설정합니다
toggleRoadview(position);
});
// 전달받은 좌표(position)에 가까운 로드뷰의 파노라마 ID를 추출하여 로드뷰를 설정하는 함수입니다
function toggleRoadview(position) {
rvClient.getNearestPanoId(position, 50, function (panoId) {
// 파노라마 ID가 null 이면 로드뷰를 숨깁니다
if (panoId === null) {
toggleMapWrapper(true, position);
} else {
toggleMapWrapper(false, position);
// panoId로 로드뷰를 설정합니다
rv.setPanoId(panoId, position);
}
});
}
// 지도를 감싸고 있는 div의 크기를 조정하는 함수입니다
function toggleMapWrapper(active, position) {
if (active) {
// 지도를 감싸고 있는 div의 너비가 100%가 되도록 class를 변경합니다
container.className = '';
// 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
map.relayout();
// 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
map.setCenter(position);
} else {
// 지도만 보여지고 있는 상태이면 지도의 너비가 50%가 되도록 class를 변경하여 로드뷰가 함께 표시되게 합니다
if (container.className.indexOf('view_roadview') === -1) {
container.className = 'view_roadview';
// 지도의 크기가 변경되었기 때문에 relayout 함수를 호출합니다
map.relayout();
// 지도의 너비가 변경될 때 지도중심을 입력받은 위치(position)로 설정합니다
map.setCenter(position);
}
}
}
// 지도 위의 로드뷰 도로 오버레이를 추가,제거하는 함수입니다
function toggleOverlay(active) {
if (active) {
overlayOn = true;
// 지도 위에 로드뷰 도로 오버레이를 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
// 지도 위에 마커를 표시합니다
marker.setMap(map);
// 마커의 위치를 지도 중심으로 설정합니다
marker.setPosition(map.getCenter());
// 로드뷰의 위치를 지도 중심으로 설정합니다
toggleRoadview(map.getCenter());
} else {
overlayOn = false;
// 지도 위의 로드뷰 도로 오버레이를 제거합니다
map.removeOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
// 지도 위의 마커를 제거합니다
marker.setMap(null);
}
}
// 지도 위의 로드뷰 버튼을 눌렀을 때 호출되는 함수입니다
function setRoadviewRoad() {
let control = document.getElementById('roadviewControl');
// 버튼이 눌린 상태가 아니면
if (control.className.indexOf('active') === -1) {
control.className = 'active';
// 로드뷰 도로 오버레이가 보이게 합니다
toggleOverlay(true);
} else {
control.className = '';
// 로드뷰 도로 오버레이를 제거합니다
toggleOverlay(false);
let position = marker.getPosition();
toggleMapWrapper(true, position);
}
}
// 로드뷰에서 X버튼을 눌렀을 때 로드뷰를 지도 뒤로 숨기는 함수입니다
function closeRoadview() {
let position = marker.getPosition();
toggleMapWrapper(true, position);
}
</script>