일부분을 올렸는데 이런식으로 가상마커 이미지(크기 조정도 해서) 구현하고자하는데 카테고리 클릭시 가상마커가 뜨지않아요 실제 위치 기반이라 임의의 정보 넣는것을 혹시 카카오에서 거부하는것인가 해서요… 값은 console.log 한 결과 places.imageSrc : undefined 이렇게 뜹니다 ㅠ
데이터 구조가 올바르면 동일한 코드로 마커를 생성할 때 정상 동작이 됩니다.
문의 내용으로 보면 PH8의 i번째 장소 정보를 가져오지 못한 것으로 보입니다.
먼저 places에 데이터가 올바른지 확인해 주세요.
그리고 PH8 카테고리는 x, y값이 반대로 들어가 있습니다.
이 경우 같은 코드를 사용할 때 좌표가 반대로 되어 있어서 마커가 생성되지 않을 수 있습니다.
데이터의 좌표값도 맞춰주세요.
let virtualPlacesByCategory = {
'AD5' : [
{
name : '바우펀 호텔 - hotel',
y : '37.571607',
x : '126.991806',
place_url : 'https://www.examplebank.com',
imageSrc : 'https://e7.pngegg.com/pngimages/726/856/png-clipart-green-map-marker-park-merlo-koningin-astridlaan-computer-icons-location-adress-miscellaneous-text.png',
road_address_name : 'Road Address for store',
address_name : 'Address for store',
phone : 'Phone Number for store'
}
],
// 다른 가상 장소 정보 추가
'PH8' : [
{
name : '바우펀 병원 - pharmacy',
y : '37.567123',
x : '126.991856',
/* x : '37.567123', y : '126.991856', */
place_url : 'https://www.examplebank.com',
imageSrc : 'https://e7.pngegg.com/pngimages/457/630/png-clipart-location-logo-location-computer-icons-symbol-location-miscellaneous-angle.png',
road_address_name : 'Road Address for pharmacy',
address_name : 'Address for pharmacy',
phone : 'Phone Number for pharmacy'
}
]
};
virtualPlacesByCategory['PH8'].forEach(item => {
// 마커를 생성합니다
let marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(item.y, item.x),
map: map
});
console.log(item.imageSrc); //이미지 값 'https://e7.pngegg.com/pngimages/457/630.. 출력
});
