지도/로컬 API에 대한 문의게시판입니다.
안녕하세요 자바스크립트 배운지 얼마 안된 초짜입니다.
연습으로 테이블에 주소를 담고 클릭하면 주소를 받아와서 지도에 표시하는 기능을 구현하려고 하는데 이전에 표시된 마커와 인포윈도우가 사라지지 않더라구요
삭제를 하기위해서 클릭을 하면 먼저 마커를 지우고 이후에 마커가 표시되는 함수를 실행하려고 했는데 마커가 정의되지 않았다고 나와서 리턴해서 값을 받으려고 했습니다만 리턴을 해도 값이 나오질 않네요 제가 뭘 잘못하고있는지 모르겠습니다. 도움을 주실 분 계실까요 ㅠㅠ
const storeContainer = document.querySelector(“tbody”),
storeList = storeContainer.querySelectorAll(“tr”);
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.570071, 126.986798), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
function searchAddress(address,name){
// 주소로 좌표를 검색합니다
geocoder.addressSearch(`${address}`, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
/*console.log(coords.Ga);*/
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: `<div style="width:150px;text-align:center;padding:6px 0;color:#444;">${name}<br><a href="https://map.kakao.com/link/map/${name},${coords.Ha},${coords.Ga}" style="color:blue" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/${name},${coords.Ha},${coords.Ga}" style="color:blue" target="_blank">길찾기</a></div></div>`
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
return [marker, infowindow];
}
});
}
console.log(searchAddress[0]);
function findStore(){
const storeName = this.querySelector(".storeName"),
storeAddress = this.querySelector(".storeAddress"),
storeNameText = storeName.innerText,
storeAddressText = storeAddress.innerText;
searchAddress(storeAddressText,storeNameText);
}
function init(){
searchAddress(“서울 종로구 종로 84”,“할리스 종로 본점”);
storeList.forEach(function(e){
e.addEventListener(“click”,findStore);
});
}
init();