[ 7/23일 API 심화] Q&A

[parkjihwanjay]

Q&A

7월 23일 세션에서 배웠던 질문하는 방법에 따라 모르는 부분에 대해 질문을 올려보고 답해봅시다

• 과제 관련도 좋고 그냥 궁금한 점도 좋습니다.
• 코드를 올려야 되는 과제라면 코드와 함께 코드에 대한 설명을 같이 올려주시고, 본인이 생각하기에 문제인 부분을 말해주세요!
• 코드를 올리고 싶으시면 ``` ``` 안에 코드를 넣으시면 됩니다.
  • ex) html일 경우 ``` ```html
  • ex) javascript일 경우 ``` ```js
• 질문도 답변도 자유롭게 해주세요
• 모르는 부분에 대해 같이 고민해보고 토의해보아요 ㅎㅎ

[eunhyoung0313]

https://github.com/eunhyoung0313/APIHW.git

1. var 로 선언하면 호이스팅 되어서 함수 밖에서도 쓸 수 있는 것으로 아는데 맨 밑에 click 이벤트에서 marker을 못잡아옵니당.. 왜그럴까요??
2. 처음에 overlay 를 만들고 그 안의 컨텐츠를 바꾸는 것을 42번째 줄 for 문 안에서 했는데 그 함수 이름이 placesSearchCB에서 발견될 수 없다는 에러가 떴고, 이걸 displayMarker 안으로 옮기자 해결되었는데 API 에서 만든 함수는 자기가 만든 함수만 인식하고 나머지는 발견할 수 없는 것으로 인식하나요?
   두번째 질문에 대해서 조금 더 설명드리자면 var overlay_content를 createContent 라는 함수로 만들어서 for 문 안에서 createContent(place) 이런식으로 했다는 말이에요!!
   3.api key 를 올리고 싶지 않아서 분리한다음 html 에
   
   이런식으로 썼는데 인식을 못합니당... 그냥올렸는데 큰일날까요??

[hybeom0720]

https://github.com/eunhyoung0313/APIHW.git

1. var 로 선언하면 호이스팅 되어서 함수 밖에서도 쓸 수 있는 것으로 아는데 맨 밑에 click 이벤트에서 marker을 못잡아옵니당.. 왜그럴까요??
2. 처음에 overlay 를 만들고 그 안의 컨텐츠를 바꾸는 것을 42번째 줄 for 문 안에서 했는데 그 함수 이름이 placesSearchCB에서 발견될 수 없다는 에러가 떴고, 이걸 displayMarker 안으로 옮기자 해결되었는데 API 에서 만든 함수는 자기가 만든 함수만 인식하고 나머지는 발견할 수 없는 것으로 인식하나요?
   두번째 질문에 대해서 조금 더 설명드리자면 var overlay_content를 createContent 라는 함수로 만들어서 for 문 안에서 createContent(place) 이런식으로 했다는 말이에요!!
   3.api key 를 올리고 싶지 않아서 분리한다음 html 에
   
   이런식으로 썼는데 인식을 못합니당... 그냥올렸는데 큰일날까요??

1. function 안에서 overlay가 선언되서 안에서만 인식되서 그런 것 같습니다. 저는 따로 let으로 pointer를 선언해준 다음에 이걸 함수 밖으로 꺼내는 식으로 설정을 하였습니다.
2. 2번째는 이해를 잘못했습니다 ㅜㅜ 아마 선언 순서와 함수 안과 밖의 차이 아닐까 싶습니다.
3. 찾아보니까 html embed의 경우에는 키를 숨기기가 어렵고 리액트로 넘어가야 숨길 수 있다고 합니다ㅜㅜ 그래서 어차피 공짜인거 저는 그냥 올리고 api key 자체를 삭제했어요.

[dooking]

https://github.com/dooking/LikeLion/tree/master/maplist

1. 장소를 검색하고 해당 마커를 눌렀을 때, 길찾기를 구현하는 과정이 잘 되지 않아 질문을 올려봅니다!
   길찾기 홈페이지이로 이동하려면 아래와 같이 https://map.kakao.com/link/map/<도착장소>,<X 좌표>,<Y 좌표> 를 이용하여 anchor태그를 사용하면 된다고 생각했습니다.
   예시) https://map.kakao.com/link/to/Hello World!,33.450701,126.570667

`(백틱)을 사용해서 도착장소의 이름과 X,Y 좌표를 따로 변수에 저장하고 anchor 태그를 만들었으나 정상적으로 작동하지 않네요ㅠㅠ 제 생각에는 마커의 좌표값이 유효하지 않은 것 같은데 혹시 비슷한 오류 겪으셨거나 해결하신분 계시면 답변부탁드립니다 :)

[eunhyoung0313]

https://github.com/eunhyoung0313/APIHW.git
제 코드에서 오버레이 안의 내용은 오지만 오버레이의 css? 가 오지 않는 문제점을 발견했는데요
console.log(overlay)를 했을 때 overlay 가 뜨지 않는 걸로 보아서 앞의 질문에서 발생한 var marker의 문제(함수 안에서만 변수가 인식되어서 밑에서 parameter로 전달이 안되는 문제)와 비슷할 수도 있겠다는 생각이 들어 overlay, marker 모두 리스트에 넣어준다음 각 marker가 클릭될 때마다 그 marker에 해당되는 오버레이에 addlistener를 하도록 코드를 짰는데 여전히 해결되지 않아 질문합니다!

현재상황:

[parkjihwanjay]

https://github.com/dooking/LikeLion/tree/master/maplist

1. 장소를 검색하고 해당 마커를 눌렀을 때, 길찾기를 구현하는 과정이 잘 되지 않아 질문을 올려봅니다!
   길찾기 홈페이지이로 이동하려면 아래와 같이 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를 보면 좋을거 같네요!

[parkjihwanjay]

https://github.com/eunhyoung0313/APIHW.git
제 코드에서 오버레이 안의 내용은 오지만 오버레이의 css? 가 오지 않는 문제점을 발견했는데요
console.log(overlay)를 했을 때 overlay 가 뜨지 않는 걸로 보아서 앞의 질문에서 발생한 var marker의 문제(함수 안에서만 변수가 인식되어서 밑에서 parameter로 전달이 안되는 문제)와 비슷할 수도 있겠다는 생각이 들어 overlay, marker 모두 리스트에 넣어준다음 각 marker가 클릭될 때마다 그 marker에 해당되는 오버레이에 addlistener를 하도록 코드를 짰는데 여전히 해결되지 않아 질문합니다!

현재상황:

코드도 같이 올려주시면 더 이해하기 쉬울거 같습니다~!

[eunhyoung0313]

코드입니당!
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);
// }