project code map

별하·2024년 7월 2일

프로젝트2

목록 보기
6/10

1. 패치로 주소를 x,y좌표로 변환후 가능하도록 console 찍으면서 확이해야함

<script>
document.addEventListener("DOMContentLoaded", marker);

function marker() {
	const key = '${keyword}'; 
	const ser = '${searchType}';
	const cat = '${category}';
	
	fetch("http://localhost:8080/root/mainAPI/storeList?keyword="+ key + "&searchType=" + ser + "&category=" + cat, {
		headers : {"Content-Type": "application/json"},
	})
    .then((response) => response.json())
    .then((res) => {

		for(let i = 0; i < ${storeListSize}; i++)
		{
			fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + res[i].store_add , {
			    headers : {"Content-Type": "application/json", "Authorization" : "KakaoAK a3c83c3855b79edaedc0687b23adb436"}
			})
			.then((response) => response.json())
			.then((res) => {
				console.log(res.documents[0].road_address.x);  
			})	
		} 
   				
   		
    })
	
}

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
var positions = [
    {
        content: '<div>카카오</div>', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        content: '<div>생태연못</div>', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        content: '<div>텃밭</div>', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
    {
        content: '<div>근린공원</div>',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738)
    }
];

for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng // 마커의 위치
    });

    // 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

</script>

2. 위에서 정상으로 작동하는지 확인 후 동적으로 여려개 가져올 수 있도록 해야함(우선 하나의 장소 가져와서 마커 생성코드)

<script>

document.addEventListener("DOMContentLoaded", marker);

function marker() {
    const key = '${keyword}'; 
    const ser = '${searchType}';
    const cat = '${category}';
    
    fetch("http://localhost:8080/root/mainAPI/storeList?keyword=" + key + "&searchType=" + ser + "&category=" + cat, {
        headers: { "Content-Type": "application/json" },
    })
    .then((response) => response.json())
    .then((res) => {
        if (res.length > 0) {
            // 첫 번째 가게의 좌표를 가져와 마커를 등록합니다.
            fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + res[0].store_add, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                }
            })
            .then((response) => response.json())
            .then((data) => {
                if (data.documents.length > 0) {
                    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                        mapOption = { 
                            center: new kakao.maps.LatLng(data.documents[0].y, data.documents[0].x), // 지도의 중심좌표를 첫 번째 가게 좌표로 설정
                            level: 3 // 지도의 확대 레벨
                        };

                    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

                    var position = new kakao.maps.LatLng(data.documents[0].y, data.documents[0].x);
                    var marker = new kakao.maps.Marker({
                        map: map,
                        position: position
                    });

                    var infowindow = new kakao.maps.InfoWindow({
                        content: '<div>' + res[0].store_name + '</div>'
                    });

                    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
                }
            });
        }
    });
}

function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}
</script>

3. 여러개 동적으로 가져오는 코드(아직 가게등록 수정 후 다시 확인-2개는 동적성공)

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", marker);

function marker() {
    const key = '${keyword}'; 
    const ser = '${searchType}';
    const cat = '${category}';
    
    fetch("http://localhost:8080/root/mainAPI/storeList?keyword=" + key + "&searchType=" + ser + "&category=" + cat, {
        headers: { "Content-Type": "application/json" },
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then((res) => {
        console.log("Store List: ", res);
        
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = { 
                center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 중심좌표 (서울 중심으로 설정)
                level: 3 // 지도의 확대 레벨
            };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        var bounds = new kakao.maps.LatLngBounds(); // 지도 경계 객체 생성

        var promises = res.map(store => {
            return fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + store.store_add, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                }
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then((data) => {
                console.log("Address Data for store: ", store.store_name, data);
                if (data.documents.length > 0) {
                    var roadAddress = data.documents[0].road_address;
                    var x = roadAddress ? roadAddress.x : data.documents[0].x;
                    var y = roadAddress ? roadAddress.y : data.documents[0].y;
                    return {
                        position: new kakao.maps.LatLng(y, x),
                        name: store.store_name
                    };
                }
            })
            .catch((error) => {
                console.error("Error fetching address data for store: ", store.store_name, error);
            });
        });

        Promise.all(promises).then(locations => {
            locations.forEach(loc => {
                if (loc) {
                    console.log("Adding marker: ", loc);
                    var marker = new kakao.maps.Marker({
                        map: map,
                        position: loc.position
                    });

                    var infowindow = new kakao.maps.InfoWindow({
                        content: '<div>' + loc.name + '</div>'
                    });

                    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

                    // 지도 경계에 마커의 위치를 포함시킴
                    bounds.extend(loc.position);

                    // 마커가 추가된 후 해당 위치로 지도의 중심을 이동
                    map.setCenter(loc.position);
                }
            });

            // 모든 마커를 포함하는 경계로 지도 범위 설정
            map.setBounds(bounds);
        }).catch((error) => {
            console.error("Error in Promise.all: ", error);
        });
    })
    .catch((error) => {
        console.error("Error fetching store list: ", error);
    });
}

function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

</script>

4. 현재코드

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", marker);

function marker() {
    const key = '${keyword}'; 
    const ser = '${searchType}';
    const cat = '${category}';
    
    fetch("http://localhost:8080/root/mainAPI/storeList?keyword=" + key + "&searchType=" + ser + "&category=" + cat, {
        headers: { "Content-Type": "application/json" },
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then((res) => {
        console.log("Store List: ", res);
        
        var addressList = document.getElementById('addressList');
        addressList.innerHTML = ''; // 기존 리스트 초기화
        
        var placesList = document.getElementById('placesList');
        placesList.innerHTML = ''; // 기존 리스트 초기화

        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = { 
                center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 중심좌표 (서울 중심으로 설정)
                level: 3 // 지도의 확대 레벨
            };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        var bounds = new kakao.maps.LatLngBounds(); // 지도 경계 객체 생성

        var promises = res.map((store, index) => {
            return fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + store.store_add, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                }
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then((data) => {
                console.log("Address Data for store: ", store.store_name, data);
                if (data.documents.length > 0) {
                    var roadAddress = data.documents[0].road_address || data.documents[0].address;
                    var x = roadAddress.x;
                    var y = roadAddress.y;

                    // 주소 목록에 추가
                    var option = document.createElement('option');
                    option.value = store.store_add;
                    addressList.appendChild(option);

                    // 검색 결과 목록에 추가
                    var listItem = document.createElement('li');
                    listItem.innerHTML = `
                        <div class="item">
                            <span class="markerbg marker_${index + 1}"></span>
                            <div class="info">
                                <h5>${store.store_name}</h5>
                                <span>${store.store_add}</span>
                                <span class="tel">${store.store_phone}</span>
                            </div>
                        </div>`;
                    placesList.appendChild(listItem);

                    return {
                        position: new kakao.maps.LatLng(y, x),
                        name: store.store_name,
                        address: store.store_add // 주소 추가
                    };
                }
            })
            .catch((error) => {
                console.error("Error fetching address data for store: ", store.store_name, error);
            });
        });

        Promise.all(promises).then(locations => {
            locations.forEach(loc => {
                if (loc) {
                    console.log("Adding marker: ", loc);
                    var marker = new kakao.maps.Marker({
                        map: map,
                        position: loc.position
                    });

                    var infowindow = new kakao.maps.InfoWindow({
                        content: '<div>' + loc.name + '<br>' + loc.address + '</div>' // 주소 추가
                    });

                    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

                    // 지도 경계에 마커의 위치를 포함시킴
                    bounds.extend(loc.position);

                    // 모든 마커를 포함하는 경계로 지도 범위 설정
                    map.setBounds(bounds);
                }
            });
        }).catch((error) => {
            console.error("Error in Promise.all: ", error);
        });
    })
    .catch((error) => {
        console.error("Error fetching store list: ", error);
    });
}

function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}
</script>

5. 현재위치geolocation 수정중

var map; // 전역 변수로 선언
const ps = new window.kakao.maps.services.Places();
var infowindow = new kakao.maps.InfoWindow({zIndex:1});

function marker() {
    const key = '${keyword}'; 
    const ser = '${searchType}';
    const cat = '${category}';
    
    fetch("http://localhost:8080/root/mainAPI/storeList?keyword=" + key + "&searchType=" + ser + "&category=" + cat, {
        headers: { "Content-Type": "application/json" },
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then((res) => {
        console.log("Store List: ", res);
        
        var addressList = document.getElementById('addressList');
        addressList.innerHTML = ''; // 기존 리스트 초기화
        
        var placesList = document.getElementById('placesList');
        placesList.innerHTML = ''; // 기존 리스트 초기화

        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = { 
                center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 중심좌표 (서울 중심으로 설정)
                level: 3 // 지도의 확대 레벨
            };

        map = new kakao.maps.Map(mapContainer, mapOption); // 전역 변수로 선언된 map을 초기화

        var bounds = new kakao.maps.LatLngBounds(); // 지도 경계 객체 생성

        var promises = res.map((store, index) => {
            return fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + store.store_add, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                }
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then((data) => {
                console.log("Address Data for store: ", store.store_name, data);
                if (data.documents.length > 0) {
                    var roadAddress = data.documents[0].road_address || data.documents[0].address;
                    var x = roadAddress.x;
                    var y = roadAddress.y;
                    
                    // searchPlaces()함수 변경
                    const searchForm = document.getElementById("submit_btn");
                    searchForm?.addEventListener("click", function(e){
                    	e.preventDefault();
                    	searchPlaces();
                    })

                    // 주소 목록에 추가
                    var option = document.createElement('option');
                    option.value = store.store_add;
                    addressList.appendChild(option);

                    // 검색 결과 목록에 추가
                    var listItem = document.createElement('li');
                    listItem.innerHTML = `
                        <div class="item">
                            <span class="markerbg marker_${index + 1}"></span>
                            <div class="info">
                                <h5>가게이름 : ${store.store_name}</h5>
                                <span>주소 : ${store.store_add}</span>
                                <span class="tel">번호 : ${store.store_phone}</span>
                            </div>
                        </div>`;
                    placesList.appendChild(listItem);

                    return {
                        position: new kakao.maps.LatLng(y, x),
                        name: store.store_name,
                        address: store.store_add // 주소 추가
                    };
                }
            })
            .catch((error) => {
                console.error("Error fetching address data for store: ", store.store_name, error);
            });
        });

        Promise.all(promises).then(locations => {
            locations.forEach((loc, index) => {//index추가확인
                if (loc) {
                    console.log("Adding marker: ", loc);
                    var marker = new kakao.maps.Marker({
                        map: map,
                        position: loc.position
                    });

                    var infowindow = new kakao.maps.InfoWindow({
                        content: '<div>' + loc.name + '<br>' + loc.address + '</div>' // 주소 추가
                    });

                    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

                    // 지도 경계에 마커의 위치를 포함시킴
                    bounds.extend(loc.position);

                    // 모든 마커를 포함하는 경계로 지도 범위 설정
                    map.setBounds(bounds);
                }
            });
        }).catch((error) => {
            console.error("Error in Promise.all: ", error);
        });
    })
    .catch((error) => {
        console.error("Error fetching store list: ", error);
    });
}

function searchPlaces(){
	const keyword= document.getElementById("keyword").value;
	
	if (!keyword.replace(/^\s+|\s+$/g, "")) {
		alert("키워드를 입력해주세요!");
		  
			return false;
		}
		  
		ps.keywordSearch(keyword, placesSearchCB);
}


function placesSearchCB(data, status, pagination) {
    if (status === window.kakao.maps.services.Status.OK) {
      displayPlaces(data);

      displayPagination(pagination);

      const bounds = new window.kakao.maps.LatLngBounds();
      for (let i = 0; i < data.length; i++) {
        displayMarker(data[i]);
        bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x));
      }

      map.setBounds(bounds);
    } else if (status === window.kakao.maps.services.Status.ZERO_RESULT) {
      alert("검색 결과가 존재하지 않습니다.");
    } else if (status === window.kakao.maps.services.Status.ERROR) {
      alert("검색 결과 중 오류가 발생했습니다.");
    }
  }



function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}



function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;

            // 서버로 좌표를 전송하여 주소를 받아옴
            $.ajax({
                url: '/main/getAddr',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ latitude: lat, longitude: lon }),
                success: function(response) {
                    var address = JSON.parse(response).documents[0].address.address_name;
                    console.log("주소 가져오기 성공: ", address);
                    searchStores(address); // 서버로 주소 전송
                },
                error: function(xhr, status, error) {
                    console.error('주소를 가져오는 중 오류가 발생했습니다.', xhr, status, error);
                    alert('주소를 가져오는 중 오류가 발생했습니다.');
                }
            });

            var locPosition = new kakao.maps.LatLng(lat, lon);
            var message = '<div style="padding:5px;">현위치</div>';
            displayMarker({ y: lat, x: lon, name: '현위치', address: '현위치' });
        }, function(error) {
            console.error("Error occurred. Error code: " + error.code);
            var locPosition = new kakao.maps.LatLng(37.4812845080678, 126.952713197762);
            var message = '현재 위치를 알 수 없어 기본 위치로 이동합니다.';
            displayMarker({ y: 37.4812845080678, x: 126.952713197762, name: '기본 위치', address: message });
        });
    } else {
        var locPosition = new kakao.maps.LatLng(37.4812845080678, 126.952713197762);
        var message = '현재 위치를 알 수 없어 기본 위치로 이동합니다.';
        displayMarker({ y: 37.4812845080678, x: 126.952713197762, name: '기본 위치', address: message });
    }
}



function getAddr(lat, lon) {
	 const url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lon}&y=${lat}&input_coord=WGS84`;
	    console.log("Request URL: ", url); // 요청 URL 로그 추가
    $.ajax({
        url: url,
        type: 'GET',
        headers: {
            "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436" // 실제 API 키로 교체 필요
        },
        success: function(data) {
            if (data.documents.length > 0) {
                var address = data.documents[0].address.address_name;
                console.log("주소 가져오기 성공: ", address);
                searchStores(address); // 서버로 주소 전송
            } else {
                alert('주소를 가져올 수 없습니다.');
                console.log('주소를 가져올 수 없습니다.', data);
            }
        },
        error: function(xhr, status, error) {
            console.error('주소를 가져오는 중 오류가 발생했습니다.', xhr, status, error);
            alert('주소를 가져오는 중 오류가 발생했습니다.');
        }
    });
}



function displayMarker(place) {
    const marker = new window.kakao.maps.Marker({
      map,
      position: new window.kakao.maps.LatLng(place.y, place.x),
    });
    window.kakao.maps.event.addListener(marker, "click", function (mouseEvent) {
        props.setAddress(place);
        infowindow.setContent(`
        <span>
        ${place.place_name}
        </span>
        `);
        infowindow.open(map, marker);
        const moveLatLon = new window.kakao.maps.LatLng(place.y, place.x);
        map.panTo(moveLatLon);
      }
    );
  }



/*
function displayMarker(store) {
    var marker = new kakao.maps.Marker({
        map: map,
        position: new kakao.maps.LatLng(store.y, store.x)
    });

    kakao.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<div style="padding:5px;font-size:12px;">' + store.name + '</div>');
        infowindow.open(map, marker);
    });
    console.log("Setting center to: ", store.y, store.x);
    map.setCenter(new kakao.maps.LatLng(store.y, store.x));
}

*/








function searchStores(address) {
    $.post('/getStoreByLocation', { address: address }, function(data) {
        var placesList = $('#placesList');
        placesList.empty();
        if (data.length > 0) {
            data.forEach(function(store, index) {
                // fetch를 통해 주소를 위도 경도로 변환
                fetch(`https://dapi.kakao.com/v2/local/search/address.json?query=${store.store_add}`, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.documents.length > 0) {
                        var roadAddress = data.documents[0].road_address || data.documents[0].address;
                        var x = roadAddress.x;
                        var y = roadAddress.y;

                        placesList.append(`
                            <div class="item">
                                <span class="markerbg marker_${index + 1}"></span>
                                <div class="info">
                                    <h5>${store.store_name}</h5>
                                    <span>${store.store_add}</span>
                                    <span class="tel">${store.store_phone}</span>
                                </div>
                            </div>
                        `);

                        // 위도와 경도를 포함한 객체로 displayMarker 호출
                        displayMarker({
                            name: store.store_name,
                            address: store.store_add,
                            x: x,
                            y: y
                        });
                    }
                })
                .catch(error => console.error("Error fetching address data for store: ", store.store_name, error));
            });
        } else {
            placesList.append('<div>상점 정보를 찾을 수 없습니다.</div>');
        }
    });
}






document.addEventListener("DOMContentLoaded", function() {
    marker();
    document.querySelector('.loc_btn').addEventListener('click', getLocation);
});

6. 현재위치를 제외하고 동적정보 목록표출과 키워드검색 목록표출 구현시도(두개를 합치니 키워드 검색목록표출 다시안됨 미완성)

<script type="text/javascript">
let markers = [];
let ps;
let map;
let infowindow = new kakao.maps.InfoWindow({zIndex:1});

let search = "";
let isOpen = true;

function onchangeSearch(event) {
	search = event.target.value;
};

function onClickSearchBarOpen() {
	isOpen = !isOpen;
};



document.addEventListener("DOMContentLoaded", function(){
	markerFunction();
	
	document.getElementById("searchForm").addEventListener("submit", function(e){
		e.preventDefault();
		searchPlaces();
	});
});




// document.addEventListener("DOMContentLoaded", function() {
//     // 초기 지도 설정
//     const mapContainer = document.getElementById('map'),
//         mapOption = {
//             center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 중심좌표 (서울 중심으로 설정)
//             level: 3 // 지도의 확대 레벨
//         };

//     map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//     ps = new kakao.maps.services.Places(); // Places 서비스 초기화

//     // 초기 검색
//     searchPlaces();

//     // 검색 폼 서브밋 이벤트 추가
//     document.getElementById("searchForm").addEventListener("submit", function(e) {
//         e.preventDefault();
//         searchPlaces();
//     });
// });


function markerFunction() {
	const key = '<c:out value="${keyword}"/>'; 
	const ser = '<c:out value="${searchType}"/>';
	const cat = '<c:out value="${category}"/>';
	
	fetch("http://localhost:8080/root/mainAPI/storeList?keyword="+ key + "&searchType=" + ser + "&category=" + cat, {
		headers : {"Content-Type": "application/json"},
	})
    .then((response) => {
    	if(!response.ok){
    		throw new Error('Network response was not ok' + response.statusText);
    	}
    	return response.json();
    })
    .then((res) => {
    	console.log("Store List : ",res);
    	
//     	const addressList = document.getElementById('addressList');
//     	if(addressList){
//     	addressList.innerHTML = ''; //기존 리스트 초기화
//     	}
    	
    	const placesList = document.getElementById('placesList');
    	if(placesList){
        placesList.innerHTML = ''; // 기존 리스트 초기화
    	}
    	
        const mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = { 
                center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 중심좌표 (서울 중심으로 설정)
                level: 3 // 지도의 확대 레벨
            };

        map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
        ps = new kakao.maps.services.Places(); // Places 서비스 초기화
	
        const bounds = new kakao.maps.LatLngBounds(); // 지도 경계 객체 생성

        const promises = res.map((store, index) => {
            return fetch("https://dapi.kakao.com/v2/local/search/address.json?query=" + store.store_add, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "KakaoAK a3c83c3855b79edaedc0687b23adb436"
                }
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then((data) => {
                console.log("Address Data for store: ", store.store_name, data);
                if (data.documents.length > 0) {
                    const roadAddress = data.documents[0].road_address || data.documents[0].address;
                    const x = roadAddress.x;
                    const y = roadAddress.y;

                    //주소 목록에 추가
//                     if(addressList){
//                     const option = document.createElement('option');
//                     option.value = store.store_add;
//                     addressList.appendChild(option);
//                     }

                    // 검색 결과 목록에 추가
                    if(placesList){
                    const listItem = getListItem(index, {
                        place_name: store.store_name,
                        road_address_name: store.store_add,
                        address_name: store.store_add_info,
                        phone: store.store_phone
                      });
//                    const listItem = document.createElement('li');
//                     listItem.innerHTML = `
//                         <div class="item">
//                             <span class="markerbg marker_${index + 1}"></span>
//                             <div class="info">
//                                 <h5>${store.store_name}</h5>
//                                 <span>${store.store_add}</span>
//                                 <span class="tel">${store.store_phone}</span>
//                             </div>
//                         </div>`;
                    placesList.appendChild(listItem);
                    }

                    return {
                        position: new kakao.maps.LatLng(y, x),
                        name: store.store_name,
                        address: store.store_add // 주소 추가
                    };
                }
            })
            .catch((error) => {
                console.error("Error fetching address data for store: ", store.store_name, error);
            });
        });

        Promise.all(promises).then(locations => {
            locations.forEach(loc => {
                if (loc) {
                    console.log("Adding marker: ", loc);
                    const marker = new kakao.maps.Marker({
                        map: map,
                        position: loc.position
                    });

                    const infowindow = new kakao.maps.InfoWindow({
                        content: '<div>' + loc.name + '<br>' + loc.address + '</div>' // 주소 추가
                    });

                    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

                    // 지도 경계에 마커의 위치를 포함시킴
                    bounds.extend(loc.position);

                    // 모든 마커를 포함하는 경계로 지도 범위 설정
                    map.setBounds(bounds);
                }
            });
        }).catch((error) => {
            console.error("Error in Promise.all: ", error);
        });
    })
    .catch((error) => {
        console.error("Error fetching store list: ", error);
    });
}

function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}




 markers = [];

// const container = document.getElementById("map");
// const options = {
// 		center : new window.kakao.maps.LatLng(37.5665, 126.9780),
// 		level: 3,
// };

//  map = new window.kakao.maps.Map(container, options);
//  ps = new window.kakao.maps.services.Places();
//  infowindow = new kakao.maps.InfoWindow({zIndex:1});


const markerPosition = new window.kakao.maps.LatLng(
		37.5665, 
		126.9780
);
const marker = new window.kakao.maps.Marker({
		position: markerPosition,
});
marker.setMap(map);


// ?
const searchForm = document.getElementById("submit_btn");
searchForm?.addEventListener("click", function(e){
	e.preventDefault();
	searchPlaces();
});


function searchPlaces(){
	const keyword= document.getElementById("keyword").value;
	
	if (!keyword.replace(/^\s+|\s+$/g, "")) {
		alert("키워드를 입력해주세요!");
		  
			return false;
		}
		console.log("searchPlaces 호출됨");
		ps.keywordSearch(keyword, placesSearchCB);
}


function placesSearchCB(data, status, pagination) {
	console.log("placesSearchCB호출");
    if (status === window.kakao.maps.services.Status.OK) {
    	console.log("검색 결과 : ", data);
      displayPlaces(data);

      displayPagination(pagination);

      const bounds = new window.kakao.maps.LatLngBounds();
      for (let i = 0; i < data.length; i++) {
        displayMarker(data[i]);
        bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x));
      }

      map.setBounds(bounds);
    } else if (status === window.kakao.maps.services.Status.ZERO_RESULT) {
      alert("검색 결과가 존재하지 않습니다.");
    } else if (status === window.kakao.maps.services.Status.ERROR) {
      alert("검색 결과 중 오류가 발생했습니다.");
    }
  }


// ?
function displayMarker(place) {
    const marker = new window.kakao.maps.Marker({
      map,
      position: new window.kakao.maps.LatLng(place.y, place.x),
    });
    window.kakao.maps.event.addListener(
      marker,
      "click",
      function (mouseEvent) {
        infowindow.setContent(`
        <span>
        ${place.store_name}
        </span>
        `);
        infowindow.open(map, marker);
        const moveLatLon = new window.kakao.maps.LatLng(place.y, place.x);
        map.panTo(moveLatLon);
      }
    );
  }


function displayPlaces(places) {
    const listEl = document.getElementById("placesList");
    const menuEl = document.getElementById("menu_wrap");
    const fragment = document.createDocumentFragment();
    const bounds = new window.kakao.maps.LatLngBounds();
    listStr='';
    
    removeAllChildNods(listEl);
    removeMarker();
    
    console.log("displayPlace 호출");
    for (let i = 0; i < places.length; i++) {
      const placePosition = new window.kakao.maps.LatLng(places[i].y, places[i].x);
      const marker = addMarker(placePosition, i);
      const itemEl = getListItem(i, places[i]);
      bounds.extend(placePosition);
      
      (function (marker, title) {
        window.kakao.maps.event.addListener(marker, "mouseover", function () {
            displayInfowindow(marker, title);
          });

        window.kakao.maps.event.addListener(marker, "mouseout", function () {
            infowindow.close();
          });

        itemEl.onmouseover = function () {
        	displayInfowindow(marker, title);
        };
        itemEl.onmouseout =  function () {
            infowindow.close();
        };
      })(marker, places[i].place_name);

      fragment.appendChild(itemEl);
    }

    listEl?.appendChild(fragment);
    menuEl.scrollTop = 0;

    map.setBounds(bounds);
  }


// ?
// window.kakao.maps.event.addListener(
//         marker,
//         "mouseover",
//         function () {
//           displayInfowindow(marker, title);
//         }
//       );
// window.kakao.maps.event.addListener(
//         marker,
//         "mouseout",
//         function () {
//           infowindow.close();
//         }
//       );



function getListItem(index, places) {
	console.log("getlistitem 호출");
	const el = document.createElement("li");
	let itemStr = '<span class="markerbg marker_' + (index + 1) +'"></span>' + 
					'<div class="info">' + 
					"<h5>" + places.place_name + "</h5>";
		if (places.road_address_name) {
            itemStr += "    <span>" + places.road_address_name + "</span>" +
             			 '   <span class="jibun gray">' +
           			   `<img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png"></img>`
              			+ places.address_name + "</span>";
          } else {
            itemStr += "<span>" + places.address_name + "</span>";
          }

          itemStr +=
            '  <span class="tel">' + places.phone + "</span>" + "</div>";

          el.innerHTML = itemStr;
          el.className = "item";

          return el;
        }



function addMarker(position, idx) {
    const imageSrc =
      "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png";
    const imageSize = new window.kakao.maps.Size(36, 37);
    const imgOptions = {
      spriteSize: new window.kakao.maps.Size(36, 691),
      spriteOrigin: new window.kakao.maps.Point(0, idx * 46 + 10),
      offset: new window.kakao.maps.Point(13, 37),
    };

    const markerImage = new window.kakao.maps.MarkerImage(
      imageSrc,
      imageSize,
      imgOptions
    );

    const marker = new window.kakao.maps.Marker({
      position,
      image: markerImage,
    });

    marker.setMap(map);
    markers.push(marker);

    return marker;
  }



function removeMarker() {
    for (let i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = [];
  }

function displayPagination(pagination) {
    const paginationEl = document.getElementById("pagination");
    const fragment = document.createDocumentFragment();
    while (paginationEl?.hasChildNodes()) {
      paginationEl.removeChild(paginationEl.lastChild);
    }

    for (let i = 1; i <= pagination.last; i++) {
      const el = document.createElement("a");
      el.href = "#";
      el.innerHTML = String(i);

      if (i === pagination.current) {
        el.className = "on";
      } else {
        el.onclick = (function (i) {
          return function () {
            pagination.gotoPage(i);
          };
        })(i);
      }

      fragment.appendChild(el);
    }
    paginationEl?.appendChild(fragment);
  }
  
  
  
function displayInfowindow(marker, title) {
    const content =
      '<div style="padding:5px;z-index:1;">' + title + "</div>";

    infowindow.setContent(content);
    infowindow.open(map, marker);
  }


function removeAllChildNods(el) {
    while (el.hasChildNodes()) {
      el.removeChild(el.lastChild);
    }
  }
  </script>
<div id="menuDiv"> -->
	                
<!-- 	                <div id="menu_wrap" class="bg_white"> -->
<!-- 	                    <div class="option"> -->
	                      
<!-- <!-- 	                            <form id="searchForm"> --> -->
<!-- <!-- 	                                키워드 :  --> -->
<!-- <!-- 	                                <input type="text" id="keyword" size="15">  --> -->
<!-- <!-- 	                                <datalist id="addressList"></datalist> --> -->
<!-- <!-- 	                                <button id="submit_btn" type="submit">검색하기</button>  --> -->
<!-- <!-- 	                            </form> --> -->
<!-- 	                        </div> -->
<!-- 	                    </div> -->
<!-- 	                    <hr> -->
<!-- 	                    <ul id="placesList"></ul> -->
<!-- 	                    <div id="pagination"></div> -->
<!-- 	                </div> -->
profile
별하
이전 포스트

project search 그 전 code

다음 포스트

project code search 다시

0개의 댓글