리액트 카카오맵 api 키워드 검색 질문

Question

리액트로 페이지 개발중입니다. 카카오맵을 사용하는데 에러가 나네요.. 키값 포함된 곳을 index.html에 썻다가 오류가 나서 이렇게 작성했는데 오류납니다. 이 블로그 참고해서 했는데 무엇이 문제인가요? 어떻게 해결하면 될까요? (키값은 해당 글에서만 주석)https://developer0809.tistory.com/90import React, { useEffect } from "react";const { kakao } = window;const MapContainer = ({ searchPlace }) => { useEffect(() => { var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 }); const script = document.createElement("script"); script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=키값&autoload=false"; document.head.appendChild(script); script.onload = () => { kakao.maps.load(() => { const container = document.getElementById("myMap"); const center = new kakao.maps.LatLng(37.50802, 127.062835); const options = { center, level: 3, }; const map = new kakao.maps.Map(container, options); //setMapCenter(center); const ps = new kakao.maps.services.Places(); ps.keywordSearch(searchPlace, placesSearchCB); function placesSearchCB(data, status, pagination) { if (status === kakao.maps.services.Status.OK) { let bounds = new kakao.maps.LatLngBounds(); for (let i = 0; i < data.length; i++) { displayMarker(data[i]); bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x)); } map.setBounds(bounds); } } function displayMarker(place) { let marker = new kakao.maps.Marker({ map: map, position: new kakao.maps.LatLng(place.y, place.x), }); // 마커에 클릭이벤트를 등록합니다 kakao.maps.event.addListener(marker, "click", function () { // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다 infowindow.setContent( '

' + place.place_name + "

" ); infowindow.open(map, marker); }); } }); }; }, [searchPlace]); return (

);};export default MapContainer;

안녕하세요플레 · Answer

kakaomap script 로드 전 constructor 호출

리액트 카카오맵 api 키워드 검색 질문

1개의 답변

기술 목록