현재 DB에서 불러온 마커 로케이션(x,y)정보를 이용해 아래와 같이 마커를 찍었습니다.
그리고 맵의 레벨별로 조절해서 마커의 사이즈를 변경하는 것도 추가 했습니다.
그런데 DB에서 불러온 마지막 마커에만 마커의 사이즈가 변경 됩니다.
어떻게 수정하면 전체 마커들의 사이즈가 맵의 레벨별로 변경 될까요??
<script>
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(37.52358233205939, 126.92650255780795),
level: 3 // 지도의 확대 레벨
};
//DB에서 불러온 location(x,y)
var listData = JSON.parse('<?=$encoded?>');
console.log(listData);
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
////////////////////////지도 레벨 변경///////////////////////////////////
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
////////////////////////지도 레벨 변경///////////////////////////////////
// 마커 변수
var marker;
// 마커 이미지 변수
var markerImage;
// 위치 변수
var locPosition;
// 마커 담을 배열
var markers = [];
////////////////////////현재 위치 사용 여부 판단///////////////////////////////////
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// 위치를 가져오는데 성공했을 경우
var successGetPos = function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
geolocationdisplayMarker(locPosition, message);
};
// 위치를 가져오는데 실패했을 경우
var failGetPos = function(){
locPosition = new kakao.maps.LatLng(37.522978, 126.925548),
message = '<div style="padding:5px;">위치허용을 수락해야 현재위치가 보입니다!</div>';
geolocationdisplayMarker(locPosition, message);
}
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(successGetPos, failGetPos);
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
alert("해당 브라우저는 위치 사용을 지원하지 않습니다.");
}
////////////////////////현재 위치 사용 여부 판단///////////////////////////////////
////////////////////////지도에 마커와 인포윈도우를 표시///////////////////////////////////
function geolocationdisplayMarker(locPosition, message) {
// 마커생성
markerImageSetting();
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
// 저장 된 마커 정보 불러오기
markerSetting();
}
////////////////////////지도에 마커와 인포윈도우를 표시///////////////////////////////////
////////////////////////마커 위치 설정///////////////////////////////////////////////
function markerSetting(){
// 마커들의 위치
listData.forEach(function(franchisee_location, index){
var x = franchisee_location[0];
var y = franchisee_location[1];
// 마커를 생성합니다
marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(x, y), // 마커를 표시할 위치
image : markerImage // 마커 이미지
});
// 마커 배열 담기
markers.push(marker);
});
// 원(Circle)의 옵션으로 넣어준 반지름
var radius = 10000;
// 마커들이 담긴 배열
markers.forEach(function(markers) {
var c1 = map.getCenter(); // 맵의 센터
var c2 = markers.getPosition(); // 마커들의 위치
var poly = new kakao.maps.Polyline({
// map: map, 을 하지 않아도 거리는 구할 수 있다.
path: [c1, c2]
});
var dist = poly.getLength(); // m 단위로 리턴
if (dist < radius) {
markers.setMap(map);
} else {
markers.setMap(null);
}
});
}
////////////////////////마커 위치 설정///////////////////////////////////////////////
////////////////////////마커 이미지 설정///////////////////////////////////////////////
function markerImageSetting(){
// 마커 이미지의 이미지 주소
var imageSrc = "https://www.gstatic.com/webp/gallery/1.jpg";
// 마커 사이즈 변경
var markerB = new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(25, 35));
var markerL = new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(15, 25));
var markerM = new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(10, 15));
var markerS = new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(5, 10));
// 결과값으로 받은 위치를 마커로 표시합니다
marker = new kakao.maps.Marker({
map: map,
position: locPosition,
clickable: true
});
// 지도가 확대 또는 축소되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
var changeMarkerImage = function(){
// 지도의 현재 레벨을 얻어옵니다
var level = map.getLevel();
// 지도 크기 레벨 별로 마커 사이즈를 조절 합니다
if(1 <= level && level <= 4) {
markerImage = markerB;
} else if(5 <= level && level <= 6) {
markerImage = markerL;
} else if(7 <= level && level <= 8) {
markerImage = markerM;
} else if(8 <= level) {
markerImage = markerS;
}
marker.setImage(markerImage);
};
kakao.maps.event.addListener(map, 'zoom_changed', changeMarkerImage);
changeMarkerImage();
}
////////////////////////마커 이미지 설정///////////////////////////////////////////////