react 질문입니다. 카카오지도api 사용해서 입력값으로 #12... - 인프런

입력으로 #123 입력할때 getXY(#123)함수에 들어가서 제가 정해준 좌표로 마커를 찍게끔 만들었는데....안찍어주네여..

어떻게 해야하나요..

/*global kakao */

import React, {useState, useEffect } from 'react'



function Map({searchPlace}) {
   

  useEffect(()=>{
    mapscript();
      }, []);


    const mapscript = () =>{

      var container = document.getElementById('map');
      var options = {
        center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
        level: 3
      };
   
      var map = new kakao.maps.Map(container, options);
     
      var position =  new kakao.maps.LatLng(37.365264512305174, 127.10676860117488);
      var marker = new kakao.maps.Marker({
        position: position,
        clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
      });

      function marking(x,y){
        var markerPosition  = new kakao.maps.LatLng(37.365264512305174, 127.10676860117488);
        var marker = new kakao.maps.Marker({
          position: markerPosition
        });
        marker.setMap(map)
      }

      function getXY(state){
        if(state === '#123'){          
            const setX = 37.365264512305174
            const setY = 127.10676860117488
            marking(setX,setY);      
            }
        }
    getXY(pet_id) // input 데이터에 따라 위치 마커 변경
   

    }
    const [pet_id, setPetId] = useState('');
   
    console.log("hello = " + pet_id)

 
 
      return (
          <div>
          <div id="map" className = 'centerMap' style={{width:"1500px", height:"800px"}}></div>
          <input type ="text" onChange= {(event) => {setPetId(event.target.value); }} ></input>
         
          </div>
      );
     
  }
  export default Map;

인프런 커뮤니티 질문&답변

react 질문입니다. 카카오지도api 사용해서 입력값으로 #123 입력시 마커를 띄어주게 만들고 싶은데