File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Keyboard} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import Button from './Button';
import Search from './Search';
import {BLACK, PRIMERY, RED, WHITE} from '../color';
export default function Map({
lat,
long,
showsUserLocation,
latDelta,
longDelta,
children,
}) {
const [actionLocation, setActionLocation] = useState();
const [searchAction, setSearchAction] = useState(655);
const sendPostRequest = async () => {
try {
const response = await fetch(`${url}/action/action_display`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (response.ok) {
const data = await response.json();
console.log('data', data);
setActionLocation(
data.report.map(item => {
return {
latitude: item[0],
longitude: item[1],
};
}),
);
} else {
console.error('Server returned an error.', error);
}
} catch (error) {
console.error('An error occurred:', error);
}
};
useEffect(() => {
console.log('searchAction changed:', searchAction);
}, [searchAction]);
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
setSearchAction(405);
},
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
setSearchAction(655);
},
);
return () => {
keyboardDidShowListener.remove();
keyboardDidHideListener.remove();
};
}, []);
return (
<View style={styles.mapStyle}>
<MapView
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: lat,
longitude: long,
latitudeDelta: latDelta,
longitudeDelta: longDelta,
}}
showsUserLocation={showsUserLocation}>
{children}
{actionLocation &&
actionLocation.length > 0 &&
actionLocation.map((loc, index) => (
<Marker
key={index} // 각 Marker에 고유한 키를 할당
coordinate={loc}
pinColor={RED}
title="action Location"
/>
))}
</MapView>
<View style={styles.buttonstyle}>
<View style={[styles.searchContainer, {bottom: searchAction}]}>
<Search placeholder={'도착지를 입력하세요'} />
</View>
<View style={styles.markerButtonStyle}>
<Button
title={'마커 표시'}
onPress={sendPostRequest}
color={WHITE}
width={180}
textAlign={'center'}
padding={10}
backgroundColor={PRIMERY}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
markerButtonStyle: {
position: 'absolute',
bottom: 7,
left: -5,
},
mapStyle: {
flex: 1,
},
searchContainer: {
position: 'absolute',
// bottom: 655,
left: -15,
flexDirection: 'row',
width: '94%',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 7,
},
buttonstyle: {
marginHorizontal: 15,
},
});