var mapContainer = document.getElementById('mainmap'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(37.599858, 126.908443), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(showYourLocation)
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치를 설정합니다
var locPosition_fail = new kakao.maps.LatLng(37.60482553409294, 126.91587716079252);
map.setCenter(locPosition_fail)
}
function showYourLocation(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition);
}
function panToposition(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
// 지도 중심좌표를 접속위치로 변경합니다
map.panTo(locPosition);
}
function showErrorMsg(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("위치정보 액세스가 거부 되었습니다.\n브라우저의 위치정보 액세스 상태를 확인 바랍니다.")
navigator.geolocation.getCurrentPosition(showYourLocation)
break;
case error.POSITION_UNAVAILABLE:
alert("위치정보를 확인 할 수 없습니다.\n사방이 트인 넓은 곳에서 다시 시도 바랍니다.")
navigator.geolocation.getCurrentPosition(showYourLocation)
break;
case error.TIMEOUT:
alert("위치정보를 확인 할 수 없습니다.\n사방이 트인 넓은 곳에서 다시 시도 바랍니다.")
navigator.geolocation.getCurrentPosition(showYourLocation)
break;
case error.UNKNOWN_ERROR:
alert("위치정보를 확인 할 수 없습니다.\n잠시 후 다시 시도 바랍니다..")
navigator.geolocation.getCurrentPosition(showYourLocation)
break;
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition) {
var imageSrc = 'https://rosha.co.kr/bizdemo69656/img/homepee/images/currnt_posit.png',
// 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(70, 35), // 마커이미지의 크기입니다
imageOption = {
offset: new kakao.maps.Point(35, 0),
alt: "현재 위치 마커"
}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
// 마커를 생성합니다
//var marker = new kakao.maps.Marker({
// map: map,
// position: locPosition,
// image: markerImage,
// zIndex: 1
//});
// 지도에 표시할 원을 생성합니다
var circle = new kakao.maps.Circle({
center: locPosition, // 원의 중심좌표 입니다
radius: 2500, // 미터 단위의 원의 반지름입니다
strokeWeight: 2, // 선의 두께입니다
strokeColor: 'rgb(190 150 70 / 0.8 )', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'shortdot', // 선의 스타일 입니다
fillColor: 'rgb(190 150 70 / 0.3)', // 채우기 색깔입니다
fillOpacity: 0.7, // 채우기 불투명도 입니다
zIndex: 1
});
// 지도에 원을 표시합니다
circle.setMap(map);
}
// 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomIn() {
map.setLevel(map.getLevel() - 1);
}
// 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomOut() {
map.setLevel(map.getLevel() + 1);
}
function panTo() {
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(panToposition, showErrorMsg)
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치를 설정합니다
var locPosition = new kakao.maps.LatLng(37.604825, 126.915877);
map.panTo(locPosition)
};
}
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 8, // 클러스터 할 최소 지도 레벨
calculator: [2, 5, 10], //클러스터 크기별 구분
gridSize: 100,
minClusterSize: 2,
styles: [{
width: '40px',
height: '40px',
background: 'rgba(59, 46, 122, .4)',
borderRadius: '20px',
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '38px',
boxShadow: 'rgb(50 50 50 / 40%) 0px 2px 3px 0px',
font: 'Noto Sans'
}, {
width: '40px',
height: '40px',
background: 'rgba(59, 46, 122, .6)',
borderRadius: '20px',
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '38px',
boxShadow: 'rgb(50 50 50 / 40%) 0px 2px 3px 0px',
font: 'Noto Sans'
}, {
width: '40px',
height: '40px',
background: 'rgba(59, 46, 122, .8)',
borderRadius: '20px',
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '38px',
boxShadow: 'rgb(50 50 50 / 40%) 0px 2px 3px 0px',
font: 'Noto Sans'
}
]
});
// 매장 정보를 포함한 JSON 가져오기
$.ajax({
url: "../img/homepee/js/shop_location.json",
dataType: "json"
})
.done(function (data) {
//console.log(data)
// JSON 재가공 후 배열 생성
var loc_dat = []; //재가공 데이터 이름
for (var i = 0; i < data.length; i++) {
var content = {
name: data[i].Name,
add: data[i].Address,
tel: data[i].Tel,
url: data[i].Url,
latlng: new kakao.maps.LatLng(data[i].lat, data[i].lng)
}
loc_dat.push(content);
};
//console.log(loc_dat);
//console.log(loc_dat[0])
// 활성화 된 오버레이 정의
var clickedOverlay = null;
for (var i = 0; i < loc_dat.length; i++) {
var data = loc_dat[i];
displayMarker(data);
}
function displayMarker(data) {
//마커 설정 내용
var Src = "https://rojanie1996.cafe24.com/bizdemo69656/img/homepee/images/marker2.png";
var Size = new kakao.maps.Size(70, 35);
var Options = {
offset: new kakao.maps.Point(35, 33) // 마커 좌표에 일치시킬 이미지 안의 좌표
};
var markerImage = new kakao.maps.MarkerImage(Src, Size, Options);
//console.log(markerImage)
//console.log(loc_dat.latlng)
//마커 생성
var marker = new kakao.maps.Marker({
map: map,
position: loc_dat[i].latlng,
alt: loc_dat[i].name,
image: markerImage,
zIndex: 1
});
//console.log(marker)
//커스텀 오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
position: marker.getPosition(), //마커에서 위치를 가져옵니다
yAnchor: 0.6,
zIndex: 3
//content: ''
});
//console.log(overlay)
// 생성된 마커를 배열로 Markers에 넣기
var markers = [];
markers.push(marker)
// 오버레이 콘텐츠 DOM------------------------------------------------------------------------
// 최상위 div
var content = document.createElement('div');
content.className = 'wrap'
// info div
var info = document.createElement('div');
info.className = 'info'
content.appendChild(info)
// title div [매장명+닫기버튼]
var title = document.createElement('div');
title.className = 'title',
title.innerHTML = loc_dat[i].name;
info.appendChild(title)
var closeBtn = document.createElement('button');
closeBtn.className = 'close'
closeBtn.innerHTML = '';
closeBtn.onclick = function () {
overlay.setMap(null);
};
info.appendChild(closeBtn);
// body
var body = document.createElement('div');
body.className = 'body',
info.appendChild(body) // body div -> info div
// dsec [주소+연락처+url]
var desc = document.createElement('div');
desc.className = 'desc',
body.appendChild(desc)
// 주소
var ellipsis = document.createElement('div');
ellipsis.className = 'ellipsis',
ellipsis.innerHTML = loc_dat[i].add
desc.appendChild(ellipsis)
// 연락처
var tel = document.createElement('div');
tel.className = 'tel',
tel.innerHTML =
'[전화번호] ' + loc_dat[i].tel + ''
desc.appendChild(tel)
// url 최상위
var url = document.createElement('div');
url.className = 'url',
desc.appendChild(url)
var url_btn = document.createElement('div');
url_btn.className = 'url_btn',
url_btn.innerHTML =
'자세한 정보 보기'
url.appendChild(url_btn)
// DOM 구성 끝 ---------------------------------------------------------------------------
overlay.setContent(content);
kakao.maps.event.addListener(marker, 'click', function () {
if (clickedOverlay) {
clickedOverlay.setMap(null);
}
overlay.setMap(map);
clickedOverlay = overlay;
});
//console.log(markers)
clusterer.addMarkers(markers);
}
});