junh_eee(이준희)
12 months ago
4 changed files with 150 additions and 126 deletions
@ -0,0 +1,109 @@
|
||||
import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; |
||||
import { Search } from 'react-feather'; |
||||
import { useState } from 'react'; |
||||
import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi'; |
||||
|
||||
export default function LaancMapSearch({ mapObject }) { |
||||
const [query, setQuery] = useState(''); |
||||
const [searchRes, setSearchRes] = useState([]); |
||||
const [isSearch, setIsSearch] = useState(false); |
||||
|
||||
// 지역 검색
|
||||
const handlerSearchRes = async () => { |
||||
const res = await flightPlanAPI.searchArea({ query: query }); |
||||
setIsSearch(true); |
||||
setSearchRes(res.data.items); |
||||
}; |
||||
|
||||
const handlerSearchChange = e => { |
||||
const { name, value } = e.target; |
||||
|
||||
if (name == 'searchInput') { |
||||
setQuery(value); |
||||
} |
||||
}; |
||||
|
||||
const handlerSearchEnter = e => { |
||||
if (e.key == 'Enter') { |
||||
handlerSearchRes(); |
||||
} |
||||
}; |
||||
|
||||
const handlerSearchCoord = (mapx, mapy) => { |
||||
const numberString = [mapx, mapy]; |
||||
const latlng = []; |
||||
|
||||
numberString.map(coord => { |
||||
let digits = coord.split(''); |
||||
|
||||
if (digits[0] !== '1') { |
||||
digits.splice(2, 0, '.'); |
||||
} else { |
||||
digits.splice(3, 0, '.'); |
||||
} |
||||
|
||||
latlng.push(Number(digits.join(''))); |
||||
}); |
||||
|
||||
setIsSearch(false); |
||||
mapObject.setCenter(latlng); |
||||
mapObject.setZoom(15); |
||||
}; |
||||
|
||||
return ( |
||||
<div className='d-flex search-comp absolute'> |
||||
<div className=''> |
||||
<InputGroup className='search-feather'> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<Search size={14} onClick={handlerSearchRes} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input |
||||
type='text' |
||||
id='searchInput' |
||||
name='searchInput' |
||||
size='sm' |
||||
autoComplete='off' |
||||
placeholder='검색명을 입력하세요.' |
||||
onChange={handlerSearchChange} |
||||
onKeyPress={handlerSearchEnter} |
||||
/> |
||||
</InputGroup> |
||||
<div className='search-result-comp'> |
||||
<ul> |
||||
{searchRes?.length !== 0 && isSearch ? ( |
||||
searchRes?.map(search => { |
||||
const title = search.title |
||||
.replaceAll('<b>', '') |
||||
.replaceAll('</b>', ''); |
||||
|
||||
return ( |
||||
<li |
||||
key={search.mapx + search.mapy} |
||||
onClick={() => handlerSearchCoord(search.mapx, search.mapy)} |
||||
> |
||||
<a> |
||||
<div className='search-result'> |
||||
<div className='title'> |
||||
<span> |
||||
<strong>{title}</strong> |
||||
</span> |
||||
</div> |
||||
<div className='address'> |
||||
<span>{search.roadAddress}</span> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
); |
||||
}) |
||||
) : ( |
||||
<></> |
||||
)} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
Loading…
Reference in new issue