아래 코드를 사용중에 있습니다.
지도 검색기능과 핀 등은 작동을 잘 하고 있는 상황이지만
검색 위치와 지정해놓은 위치간에 거리비교 및 페이지 하단 리스트 표기가 원활하게 진행되고 있지 않은 상황입니다.
지도를 이미 가져온 상태라 관련이 없을지도 모르겠지만 … 고수님의 도움 부탁드립니다…
<script>
function initMap() {
let map;
let customMarkers = []; // customMarkers를 여기서 정의
const placeListView = document.getElementById('placeListView');
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(37.5665, 126.9780),
level: 13
};
map = new kakao.maps.Map(container, options);
const input = document.getElementById('searchInput');
window.searchPlace = function() {
const keyword = input.value;
const ps = new kakao.maps.services.Places();
ps.keywordSearch(keyword, (data, status) => {
if (status === kakao.maps.services.Status.OK) {
const place = data[0];
const coords = new kakao.maps.LatLng(place.y, place.x);
map.panTo(coords);
const marker = new kakao.maps.Marker({
position: coords
});
map.markers && map.markers.forEach(marker => marker.setMap(null));
marker.setMap(map);
map.markers = [marker];
updatePlaceList();
}
});
};
function updatePlaceList() {
const placeListView = document.getElementById('placeListView');
placeListView.innerHTML = '';
// 가까운 순으로 정렬
customMarkers.sort((a, b) => {
const distanceA = kakao.maps.services.Distance.getDistance(map.getCenter(), a.getPosition());
const distanceB = kakao.maps.services.Distance.getDistance(map.getCenter(), b.getPosition());
return distanceA - distanceB;
});
customMarkers.forEach(marker => {
const distance = kakao.maps.services.Distance.getDistance(map.getCenter(), marker.getPosition());
const listItem = document.createElement('li');
// 부여한 이름 및 주소 표시
listItem.textContent = `이름: ${marker.name}, 주소: ${marker.getPosition()} (거리: ${distance.toFixed(2)}m)`;
placeListView.appendChild(listItem);
});
}
// 사용자가 직접 입력한 장소 목록
const locations = [
{ name: '티스테이션 도림점', address: '서울 영등포구 도림로 342' },
{ name: '장소2', address: '주소2' },
// 추가적으로 필요한 만큼 계속 추가
];
locations.forEach(location => {
const address = location.address;
const name = location.name;
// 주소로부터 좌표 얻어오기
const geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(address, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
const customCoords = new kakao.maps.LatLng(result[0].y, result[0].x);
const customMarker = new kakao.maps.Marker({
position: customCoords,
map: map,
});
// 사용자가 부여한 이름 추가
customMarker.name = name;
customMarkers.push(customMarker);
updatePlaceList();
}
});
});
}
// Kakao Maps API를 로드한 후 initMap 함수를 호출
kakao.maps.load(() => {
initMap();
});
</script>