[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new window.kakao.maps.LatLng(36.0190178, 129.3434808), // 지도의 중심좌표
level: 13 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성
var customOverlay = new kakao.maps.CustomOverlay({});
var infowindow = new kakao.maps.InfoWindow({});
fetch(‘http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=Servicekey&numOfRows=100&contentTypeId=12&areaCode=32&sigunguCode=&cat1=A01&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=AppTest&_type=json’)
.then(response => response.json())
.then(data => {
const items = data.response.body.items.item;
const attractiondict = items.filter(attraction => attraction.mapx)
.map(attraction => {
const content = {
title: attraction.title,
latlng: new kakao.maps.LatLng(attraction.mapy, attraction.mapx),
/* mapx: String(attraction.mapx),
mapy: String(attraction.mapy), */
addr1: String(attraction.addr1),
tel: attraction.tel ? String(attraction.tel) : ‘’,
};
return content;
});
setAttractions(attractiondict);
});
// 마커 이미지의 이미지 주소입니다
var imageSrc = “https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
for (var i = 0; i < attractions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: attractions[i].latlng, // 마커를 표시할 위치
title : attractions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
marker.setMap(map);
react에서 UseEffect() 안에 쓰고 있는데 카카오 지도에 tour api 에서 받은 관광지 값을 지도에 표시하고싶은데 처음 npm start로 웹페이지를 띄었을때는 마커가 나오지만 화면 새로고침을 하면 TypeError: Cannot read properties of undefined (reading ‘setMap’) 에러가 나옵니다… 혹시 도움을 주실 선배님들 계신가요 ㅠㅠ