outsourcing 프로젝트
- 카카오 지도 API 연동
import { Map, MapMarker } from 'react-kakao-maps-sdk';
import { useState, useEffect } from 'react';
import useInput from '../hooks/useInput';
function Location() {
const [info, setInfo] = useState();
const [markers, setMarkers] = useState([]);
const [map, setMap] = useState();
const [input, onChangeInputHandler] = useInput();
useEffect(() => {
if (!map) return;
const ps = new kakao.maps.services.Places();
ps.keywordSearch(`강남 맛집`, (data, status, _pagination) => {
if (status === kakao.maps.services.Status.OK) {
const bounds = new kakao.maps.LatLngBounds();
let markers = [];
for (var i = 0; i < data.length; i++) {
markers.push({
position: {
lat: data[i].y,
lng: data[i].x
},
content: data[i].place_name
});
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
setMarkers(markers);
map.setBounds(bounds);
}
});
}, [map]);
return (
<StSection>
<Map
center={{
lat: 37.566826,
lng: 126.9786567
}}
style={{
width: '100%',
height: '100%'
}}
level={3}
onCreate={setMap}
>
{markers.map((marker) => (
<MapMarker
key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
position={marker.position}
onClick={() => setInfo(marker)}
>
{info && info.content === marker.content && <div style={{ color: '#000' }}>{marker.content}</div>}
</MapMarker>
))}
</Map>
</StSection>
);
}
export default Location;
const StSection = styled.section`
width: 60%;
height: 100%;
background-color: purple;
`;