FR_page.3

산불이 난 곳을 클릭했을 때, 그 산불이 난 위치와 산불의 정보를 보여주기 위해

  kakao.maps.event.addListener(marker, 'click', function(){

                            let geocoder = new kakao.maps.services.Geocoder();
                            let callback = function(result, status) {
                                if (status === kakao.maps.services.Status.OK) {
                                    const arr  ={ ...result};
                                    const _arr = arr[0].address.address_name;
                                    //console.log(arr);
                                    setSelectedLocation({arr : _arr});
                                }
                            }
                            geocoder.coord2Address(location.getLng(), location.getLat(), callback);
                            
                            setSelectedPosition({ lat: location.getLat(), lng: location.getLng() });

                            document.getElementById("map").style.width = "80%";
                            document.getElementById("map_i").style.width = "20%";

                            map.setCenter(location);
                            
                            //var level = map.getLevel() - 1;
                            //map.setLevel(level, {anchor: this.getPosition()});
                        });

kakao.maps.event.addListener을 사용했다.
원래 처음에는 영역을 확대하도록 했지만, 뭔가 표현이 되지 않아서 정보를 보여주기로 결정했다.

경도와 위도의 정보를 가지고 주소를 알기 위해, geocoder을 사용했다. 가져온 주소를 selectedLocation에 저장했다.
경도와 위도 또한 selectedPosition에 저장했다.

		   <Card id='map' className={`custom-box-shadow rounded-2`} style={{ padding: 0, marginLeft: 0, marginRight: 0, marginTop: 0, height:'calc(75vh - 10px)', width: '100%'}}>
                <CardBody className={`rounded-2 align-items-center text-center`} style={{ padding: '0.5rem' }}>
                    
                    <div                                            
                        className='position-relative border w-100 d-inline-block bg-l25-light border'
                        style={{
                            width: '100%', height: '100%'
                        }}>
                        <div id='kakaoMap' className='kakao-map' style={{ width: '100%', height: '100%' }}></div>
                    </div>
                </CardBody>
            </Card> 
            <Card id='map_i' className={'custom-box-shadow rounded-2'} style={{width: "0%", marginLeft: 10, transition: "0.3s"}}>
                <CardBody>
                    <div className='text-center' style={{ fontFamily: 'KCC-Hanbit', fontSize: 30 }}>
                        {t("산불 정보")}
                        {selectedLocation ? (
                            <p  style={{fontSize: 15}}> 위치 : {selectedLocation.arr} </p>
                        ) : ""}

                        {selectedPosition ? (
                            <p style={{fontSize: 13}}>위도: {selectedPosition.lat} <br/>  경도: {selectedPosition.lng}</p>
                        ) : ""}
                        
                    </div>
                </CardBody>
            </Card>

card에 id를 설정해준 다음 card의 width를 변경해준다.

마커를 하나 클릭 시, 경도와 위도, 주소 등 산불의 정보가 적힌 card가 나오고, 지도의 center 또한 선택 마커의 위치로 변경된다.