전체 핀이 조회되지 않습니다.
15개 장소db가 있는데 5개만 조회 됩니다.
코드가 잘못된 부분이 있을까요?
아무리 찾아도 잘 모르겠습니다;;
function getContent(data) {
// 유튜브 섬네일 id 가져오기
console.log(data);
let replaceUrl = data.videoUrl;
let finUrl = "";
replaceUrl = replaceUrl.replace("https://youtu.be/", "");
replaceUrl = replaceUrl.replace("https://youtube.com/embed", "");
replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", "");
finUrl = replaceUrl.split("&")[0];
// 인포윈도우 가공하기
return `
<div class="infowindow">
<div class="infowindow-img-container">
<img
src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg"
class="infowindow-img"
/>
</div>
<div class="infowindow-body">
<h5 class="infowindow-title">${data.title}</h5>
<p class="infowindow-address">${data.address}</p>
<a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a>
</div>
</div>
`;
}
// HTML 코드로 바꾸는 함수
function getContent(data) {
let videoId = "";
let replaceUrl = data.videoUrl;
replaceUrl = replaceUrl.replace("https://youtu.be/", "");
replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", "");
replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", "");
videoId = replaceUrl.split("&")[0];
const result = `<div class="infowindow">
<div class="infowindow-img-container">
<img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="...">
</div>
<div class="infowindow-body">
<h5 class="infowindow-title">${data.title}</h5>
<p class="infowindow-text">${data.address}</p>
<a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a>
</div>
</div>`;
return result;
}
async function setMap(dataSet) {
markerArray = [];
infowindowArray = [];
for (var i = 0; i < dataSet.length; i ++) {
// 마커를 생성합니다
let coords = await getCoordsByAddress(dataSet[i].address)
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: coords, // 마커를 표시할 위치
});
markerArray.push(marker);
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용
});
infowindowArray.push(infowindow);
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(
marker,
"click",
makeOverListener(map, marker, infowindow, coords));
kakao.maps.event.addListener(
map,
"click",
makeOutListener(infowindow));
}
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다W
// 1. 클릭시 다른 인포윈도우 닫기
// 2. 클릭한 곳으로 지도 중심 옮기기
function makeOverListener(map, marker, infowindow, coords) {
return function() {
// 1. 클릭시 다른 인포윈도우 닫기
closeInfoWindow();
infowindow.open(map, marker);
// 2. 클릭한 곳으로 지도 중심 옮기기
map.panTo(coords)
};
}
let infowindowArray = [];
function closeInfoWindow(){
for (let infowindow of infowindowArray) {
infowindow.close();
}
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
/*
**********************************************
5. 카테고리 분류
*/
// 카테고리
const categoryMap = {
korea: "한식",
china: "중식",
japan: "일식",
america: "양식",
wheat: "분식",
meat: "구이",
sushi: "회/초밥",
etc: "기타",
};
const categoryList = document.querySelector(".category-list");
categoryList.addEventListener("click", categoryHandler);
async function categoryHandler(event) {
const categoryId = event.target.id;
const category = categoryMap[categoryId];
try {
// 데이터 분류
let categorizedDataSet = await getDataSet(category);
// 기존 마커 삭제
closeMarker();
// 기존 인포윈도우 닫기
closeInfoWindow();
setMap(categorizedDataSet)
} catch (error) {
console.error(error);
}
}
let markerArray = [];
function closeMarker() {
for (marker of markerArray) {
marker.setMap(null)
}
}
async function setting() {
try {
const dataSet = await getDataSet();
setMap(dataSet);
} catch (error) {
console.error(error);
}
}
setting();
Answer 1
0
안녕하세요.
실제 몇개 영상이 비공개처리되서 유효하지 않은 링크라서 그런 것으로 추정됩니다.
원하시는 영상 데이터로 한번 테스트 해보시면 좋을 것 같습니다.
감사합니다.
0
안녕하세요.
카테고리 각각 클릭 시에는 핀 장소가 나타납니다.
전체 조회 시 일부만 보여 지는데 영상 데이터도 문제없이 다 잘나옵니다. db데이터 문제이기에 카테고리 선택시에는 잘 나타나서..;; 윈포윈도우 가공에서 object를 잘못 쓴건지 잘 모르겠습니다.
live server가 안 떠요..
0
77
1
카카오맵 API 가 안뜹니다...
0
663
2
카카오맵API 지도 관련
0
169
1
Putty에서 nginx를 vi로 수정할때 오류
0
277
3
mysql과 선생님의 깃허브 코드연결
0
182
1
nodemon 실행오류
0
226
2
Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?
0
254
2
css 적용 중 강의대로 적용되지 않아 질문 드립니다
0
346
2
강의를 잘 활용하는 법 추천 부탁드립니다.
0
282
1
MysqlWorkbench 접속문제
0
299
1
빅데이터 처리관련
1
279
1
섹션5의 2번째 강의 질문-setMap 비동기 처리 이유
0
233
1
PM2 EADDRINUSE 에러
0
404
2
인스턴스 중단 후 재시작
0
277
1
이미지 부분에 cctv 영상을 넣고 싶은데요.
0
580
2
노션 링크가 어디있나요 ?
1
307
1
axios 이후 마커 오류
0
289
0
service nginx restart 에러
0
709
1
섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ
0
497
3
선생님 추가적으로 새로운 페이지를 만드려고 하는데요...
0
245
1
코드 질문 드립니다!
0
223
1
혹시 강의자료 노션 내리셨나요?
0
234
1
노드몬 에러 참조하세요
0
356
1
깃허브에서 다운받지 않고 생성하는 방법 여쭤보고 싶습니다.
0
316
1

