ES6를 공부하고 나서 let과 const만을 사용하고 싶은데
이클립스는 let의 글자 색을 변환시켜주지 않는다.
가시성이 너무너무 떨어져서 그냥 var를 사용했다.
그리고 같이 개발하는 개발자들이 var 만 사용하기 때문에 사실상 const도 나중에 수정해야될지도 모른다.
-- 4/8 카카오 지도 사라짐..............
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<%@ include file="/common/try.jsp" %>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기2</title>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.map_wrap {position:relative;overflow:hidden;width:100%;height:350px;}
.radius_border{border:1px solid #919191;border-radius:5px;}
.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
.custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff, #e6e6e6);}
.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}
.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
.custom_typecontrol .selected_btn:hover {color:#fff;}
.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;}
.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}
.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}
.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}
</style>
</head>
<body>
<div class="map_wrap">
<div id="map" style="width:600px;height:400px;"></div>
<!-- 지도타입 컨트롤 div 입니다 -->
<div class="custom_typecontrol radius_border">
<span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
<span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
</div>
<!-- 지도 확대, 축소 컨트롤 div 입니다 -->
<div class="custom_zoomcontrol radius_border">
<span onclick="zoomIn()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png" alt="확대"></span>
<span onclick="zoomOut()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png" alt="축소"></span>
</div>
</div>
<div>
<button class="local">서울</button class="local">
<button class="local">인천</button>
<button class="local">대전</button>
<button id="setMap">지도 범위 재설정 하기</button>
<!--
temp1[0].SI_NM+ " " + temp1[0].SGG_NM+ " " + temp1[0].RD_MGT_SN+ " " + temp1[0].BULD_MNNM+ " " + temp1[0].BULD_SLNO
서울특별시 강남구 도곡로43길 25 0
서울특별시 서대문구 경기대로 26 26
-->
</div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.5610226183, 126.962192415514), // 지도의 초기값 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
var bounds = new kakao.maps.LatLngBounds();
const geocoder = new kakao.maps.services.Geocoder(); //주소 -> 좌표 변환 객체생성
var selectedMarker = null; // 클릭한 마커를 담을 변수
// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
const markerArr = [];
const coordsArr = [];
//지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
function setMapType(maptype) {
var roadmapControl = document.getElementById('btnRoadmap');
var skyviewControl = document.getElementById('btnSkyview');
if (maptype === 'roadmap') {
map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
roadmapControl.className = 'selected_btn';
skyviewControl.className = 'btn';
} else {
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
skyviewControl.className = 'selected_btn';
roadmapControl.className = 'btn';
}
}
//지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomIn() {
map.setLevel(map.getLevel() - 1);
}
//지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomOut() {
map.setLevel(map.getLevel() + 1);
}
// LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
function setBounds() {
// 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
map.setBounds(bounds);
}
//마커세팅
var MARKER_WIDTH = 33, // 기본, 클릭 마커의 너비
MARKER_HEIGHT = 36, // 기본, 클릭 마커의 높이
OFFSET_X = 12, // 기본, 클릭 마커의 기준 X좌표
OFFSET_Y = MARKER_HEIGHT, // 기본, 클릭 마커의 기준 Y좌표
OVER_MARKER_WIDTH = 40, // 오버 마커의 너비
OVER_MARKER_HEIGHT = 42, // 오버 마커의 높이
OVER_OFFSET_X = 13, // 오버 마커의 기준 X좌표
OVER_OFFSET_Y = OVER_MARKER_HEIGHT, // 오버 마커의 기준 Y좌표
SPRITE_MARKER_URL = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markers_sprites2.png', // 스프라이트 마커 이미지 URL
SPRITE_WIDTH = 126, // 스프라이트 이미지 너비
SPRITE_HEIGHT = 146, // 스프라이트 이미지 높이
SPRITE_GAP = 10; // 스프라이트 이미지에서 마커간 간격
//세팅한 마커값 주입
var markerSize = new kakao.maps.Size(MARKER_WIDTH, MARKER_HEIGHT), // 기본, 클릭 마커의 크기
markerOffset = new kakao.maps.Point(OFFSET_X, OFFSET_Y), // 기본, 클릭 마커의 기준좌표
overMarkerSize = new kakao.maps.Size(OVER_MARKER_WIDTH, OVER_MARKER_HEIGHT), // 오버 마커의 크기
overMarkerOffset = new kakao.maps.Point(OVER_OFFSET_X, OVER_OFFSET_Y), // 오버 마커의 기준 좌표
spriteImageSize = new kakao.maps.Size(SPRITE_WIDTH, SPRITE_HEIGHT); // 스프라이트 이미지의 크기
</script>
<script>
//마커를 지도 위에 표시, 마커 이벤트를 등록
//MakrerImage 객체를 생성하여 반환하는 함수입니다
const createMarkerImage = function(markerSize, offset, spriteOrigin) {
var markerImage = new kakao.maps.MarkerImage(
SPRITE_MARKER_URL, // 스프라이트 마커 이미지 URL
markerSize, // 마커의 크기
{
offset: offset, // 마커 이미지에서의 기준 좌표
spriteOrigin: spriteOrigin, // 스트라이프 이미지 중 사용할 영역의 좌상단 좌표
spriteSize: spriteImageSize // 스프라이트 이미지의 크기
}
);
return markerImage;
};
//배열에 추가된 마커들을 지도에 삭제하는 함수입니다
function setMarkers(map) {
for (var i = 0; i < markerArr.length; i++) {
markerArr[i].setMap(map);
}
}
const addMarker = function(coords, normalOrigin, overOrigin, clickOrigin) {
// 기본 마커이미지, 오버 마커이미지, 클릭 마커이미지를 생성합니다
var normalImage = createMarkerImage(markerSize, markerOffset, normalOrigin),
overImage = createMarkerImage(overMarkerSize, overMarkerOffset, overOrigin),
clickImage = createMarkerImage(markerSize, markerOffset, clickOrigin);
var marker = new kakao.maps.Marker({
map: map,
position: coords,
image: normalImage
});
markerArr.push(marker);
// 마커 객체에 마커아이디와 마커의 기본 이미지를 추가합니다
marker.normalImage = normalImage;
// 마커 mouseover 이벤트
kakao.maps.event.addListener(marker, 'mouseover', function() {
// 클릭된 마커가 없고, mouseover된 마커가 클릭된 마커가 아니면
// 마커의 이미지를 오버 이미지로 변경합니다
if (!selectedMarker || selectedMarker !== marker) {
marker.setImage(overImage);
}
});
// 마커 mouseout 이벤트
kakao.maps.event.addListener(marker, 'mouseout', function() {
// 클릭된 마커가 없고, mouseout된 마커가 클릭된 마커가 아니면
// 마커의 이미지를 기본 이미지로 변경합니다
if (!selectedMarker || selectedMarker !== marker) {
marker.setImage(normalImage);
}
});
// 마커 click 이벤트
kakao.maps.event.addListener(marker, 'click', function() {
// 클릭된 마커가 없고, click 마커가 클릭된 마커가 아니면
// 마커의 이미지를 클릭 이미지로 변경합니다
if (!selectedMarker || selectedMarker !== marker) {
// 클릭된 마커 객체가 null이 아니면
// 클릭된 마커의 이미지를 기본 이미지로 변경하고
!!selectedMarker && selectedMarker.setImage(selectedMarker.normalImage);
// 현재 클릭된 마커의 이미지는 클릭 이미지로 변경합니다
marker.setImage(clickImage);
}
// 클릭된 마커를 현재 클릭된 마커 객체로 설정합니다
selectedMarker = marker;
});
};
//지도 위에 마커를 표시합니다
const addEvntshowMaker = function(coordsArr){
for (var i = 0, len = coordsArr.length; i < len; i++) {
var gapX = (MARKER_WIDTH + SPRITE_GAP), // 스프라이트 이미지에서 마커로 사용할 이미지 X좌표 간격 값
originY = (MARKER_HEIGHT + SPRITE_GAP) * i, // 스프라이트 이미지에서 기본, 클릭 마커로 사용할 Y좌표 값
overOriginY = (OVER_MARKER_HEIGHT + SPRITE_GAP) * i, // 스프라이트 이미지에서 오버 마커로 사용할 Y좌표 값
normalOrigin = new kakao.maps.Point(0, originY), // 스프라이트 이미지에서 기본 마커로 사용할 영역의 좌상단 좌표
clickOrigin = new kakao.maps.Point(gapX, originY), // 스프라이트 이미지에서 마우스오버 마커로 사용할 영역의 좌상단 좌표
overOrigin = new kakao.maps.Point(gapX * 2, overOriginY); // 스프라이트 이미지에서 클릭 마커로 사용할 영역의 좌상단 좌표
// 마커를 생성하고 지도위에 표시
addMarker(coordsArr[i] , normalOrigin, overOrigin, clickOrigin);
bounds.extend(coordsArr[i]);
setBounds();
}
};
//주소 -> 좌표 변환, 마커 표시
const doMarkwithAddr = function(positions){
for(var i = 0; i < positions.length; i++){
geocoder.addressSearch(positions[i].ADDRESS, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x) //좌표 변환
coordsArr.push(coords);
console.log(coords);
if(coordsArr.length == positions.length){
addEvntshowMaker(coordsArr);
}
}
});
}
};
</script>
<script>
$(document).ready(function(){
$('.local').click(function(){
let data = {
DB_TYPE : 'getList',
local : $(this).text()
};
$.ajax({
async: false,
type : 'get',
url: "<%=request.getContextPath()%>mapAjax.jsp",
data : data,
success : function(list){
if(markerArr.length !== 0){
setMarkers(null); //마커를 지도에서 감춤
markerArr.splice(0, markerArr.length); //마커배열 제거
coordsArr.splice(0, coordsArr.length); //좌표 배열 제거
bounds = new kakao.maps.LatLngBounds(); //범위객체 새로 생성
}
doMarkwithAddr(JSON.parse(list)); // 주소->좌표 변환 후 다중 마커생성
},
error : function(xhr, status, error){
console.log(xhr);
console.log('ajax error......');
},
});
});
//지도범위 재설정
$('#setMap').click(function(){
if(markerArr.length === 0 ) return;
setBounds();
});
});
</script>
</body>
</html>
Hej_han