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} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import Button from './Button';
export default function Map({
lat,
long,
showsUserLocation,
latDelta,
longDelta,
children,
}) {
const [potholeLocation, setPotholeLocation] = useState();
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);
setPotholeLocation(
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);
}
};
//화면이 처음 렌더링될 때 sendPostRequest 호출
useEffect(() => {
console.log('loc ' + lat + ' ' + long);
// sendPostRequest();
}, []); // 두 번째 매개변수로 빈 배열을 전달하여 화면이 처음 렌더링될 때 한 번만 실행
return (
<View style={styles.mapStyle}>
<MapView
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: lat,
longitude: long,
latitudeDelta: latDelta,
longitudeDelta: longDelta,
}}
showsUserLocation={showsUserLocation}>
{children}
{potholeLocation &&
potholeLocation.length > 0 &&
potholeLocation.map((loc, index) => (
<Marker
key={index} // 각 Marker에 고유한 키를 할당
coordinate={loc}
pinColor={'#ff0000'}
title="action Location"
/>
))}
</MapView>
<View style={styles.buttonstyle}>
<Button
title={'마커 표시'}
onPress={sendPostRequest}
color={'#ffffff'}
width={'100%'}
textAlign={'center'}
padding={10}
backgroundColor={'#357af9'}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
mapStyle: {
flex: 1,
},
buttonstyle: {
marginHorizontal: 15,
},
});