Open parkjihwanjay opened 3 years ago
https://github.com/eunhyoung0313/APIHW.git
https://github.com/eunhyoung0313/APIHW.git
- var 로 선언하면 호이스팅 되어서 함수 밖에서도 쓸 수 있는 것으로 아는데 맨 밑에 click 이벤트에서 marker을 못잡아옵니당.. 왜그럴까요??
- 처음에 overlay 를 만들고 그 안의 컨텐츠를 바꾸는 것을 42번째 줄 for 문 안에서 했는데 그 함수 이름이 placesSearchCB에서 발견될 수 없다는 에러가 떴고, 이걸 displayMarker 안으로 옮기자 해결되었는데 API 에서 만든 함수는 자기가 만든 함수만 인식하고 나머지는 발견할 수 없는 것으로 인식하나요? 두번째 질문에 대해서 조금 더 설명드리자면 var overlay_content를 createContent 라는 함수로 만들어서 for 문 안에서 createContent(place) 이런식으로 했다는 말이에요!! 3.api key 를 올리고 싶지 않아서 분리한다음 html 에 이런식으로 썼는데 인식을 못합니당... 그냥올렸는데 큰일날까요??
https://github.com/dooking/LikeLion/tree/master/maplist
`(백틱)을 사용해서 도착장소의 이름과 X,Y 좌표를 따로 변수에 저장하고 anchor 태그를 만들었으나 정상적으로 작동하지 않네요ㅠㅠ 제 생각에는 마커의 좌표값이 유효하지 않은 것 같은데 혹시 비슷한 오류 겪으셨거나 해결하신분 계시면 답변부탁드립니다 :)
https://github.com/eunhyoung0313/APIHW.git 제 코드에서 오버레이 안의 내용은 오지만 오버레이의 css? 가 오지 않는 문제점을 발견했는데요 console.log(overlay)를 했을 때 overlay 가 뜨지 않는 걸로 보아서 앞의 질문에서 발생한 var marker의 문제(함수 안에서만 변수가 인식되어서 밑에서 parameter로 전달이 안되는 문제)와 비슷할 수도 있겠다는 생각이 들어 overlay, marker 모두 리스트에 넣어준다음 각 marker가 클릭될 때마다 그 marker에 해당되는 오버레이에 addlistener를 하도록 코드를 짰는데 여전히 해결되지 않아 질문합니다!
현재상황:
https://github.com/dooking/LikeLion/tree/master/maplist
- 장소를 검색하고 해당 마커를 눌렀을 때, 길찾기를 구현하는 과정이 잘 되지 않아 질문을 올려봅니다! 길찾기 홈페이지이로 이동하려면 아래와 같이 https://map.kakao.com/link/map/<도착장소>,<X 좌표>,<Y 좌표> 를 이용하여 anchor태그를 사용하면 된다고 생각했습니다. 예시) https://map.kakao.com/link/to/Hello World!,33.450701,126.570667
`(백틱)을 사용해서 도착장소의 이름과 X,Y 좌표를 따로 변수에 저장하고 anchor 태그를 만들었으나 정상적으로 작동하지 않네요ㅠㅠ 제 생각에는 마커의 좌표값이 유효하지 않은 것 같은데 혹시 비슷한 오류 겪으셨거나 해결하신분 계시면 답변부탁드립니다 :)
길찾기 화면에거 console.log를 보면 좋을거 같네요!
https://github.com/eunhyoung0313/APIHW.git 제 코드에서 오버레이 안의 내용은 오지만 오버레이의 css? 가 오지 않는 문제점을 발견했는데요 console.log(overlay)를 했을 때 overlay 가 뜨지 않는 걸로 보아서 앞의 질문에서 발생한 var marker의 문제(함수 안에서만 변수가 인식되어서 밑에서 parameter로 전달이 안되는 문제)와 비슷할 수도 있겠다는 생각이 들어 overlay, marker 모두 리스트에 넣어준다음 각 marker가 클릭될 때마다 그 marker에 해당되는 오버레이에 addlistener를 하도록 코드를 짰는데 여전히 해결되지 않아 질문합니다!
현재상황:
코드도 같이 올려주시면 더 이해하기 쉬울거 같습니다~!
코드입니당! var api_key = config.API_KEY var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 };
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
var markerlist = []
let overlaylist = []
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다 // let search_info = document.getElementbyId('search_info').value function add_search(){ var search_info = document.getElementById("search_info").value ps.keywordSearch(search_info, placesSearchCB); } // 키워드 검색 완료 시 호출되는 콜백함수 입니다 function placesSearchCB (data, status, pagination) { if (status === kakao.maps.services.Status.OK) { console.log(data, '이거 data임') // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 // LatLngBounds 객체에 좌표를 추가합니다 var bounds = new kakao.maps.LatLngBounds(); for (var i=0; i<data.length; i++) { displayMarker(data[i]); markerlist.push(displayMarker(data[i])[0]);
console.log(markerlist ,'마커리스트에 넣어짐')
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
overlaylist.push(displayMarker(data[i])[1])
console.log(overlaylist, '오버레이리스트 생성된다')
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다 function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)})
var overlay_content =
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' '+place.place_name +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="desc">' +
' <div class="ellipsis">'+place.road_address_name+'</div>' +
' <div class="jibun ellipsis">'+place.address_name+' 2181</div>' +
' <div><a href='+place.place_url+' target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
var overlay = new kakao.maps.CustomOverlay({
content: overlay_content,
map: map,
position: marker.getPosition()
})
return [marker, overlay]
};
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니 for(let j = 0; j < markerlist.length; j++){ kakao.maps.event.addListener(markerlist[j], 'click', function() { overlaylist[j].setMap(map); console.log("클릭시 오버레이 함수 작동") }); }
// function closeOverlay() {
// overlaylist[j].setMap(null);
// }
Q&A
7월 23일 세션에서 배웠던 질문하는 방법에 따라 모르는 부분에 대해 질문을 올려보고 답해봅시다