File name
Commit message
Commit date
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, Alert} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import {RED} from '../color';
export default function Map({
lat,
long,
showsUserLocation,
latDelta,
longDelta,
children,
}) {
const [potholeLocation, setPotholeLocation] = useState();
const sendPostRequest = async () => {
try {
const timestamp = Math.floor(Date.now() / 1000); // 타임스탬프를 생성하거나 필요한 값으로 대체
const response = await fetch(`${url}/action/pothole_display`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
timestamp: timestamp,
}),
});
if (response.ok) {
const data = await response.json();
setPotholeLocation(
data.pothole.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(() => {
sendPostRequest();
Alert.alert('알림', 'bump 발생');
}, []); // 두 번째 매개변수로 빈 배열을 전달하여 화면이 처음 렌더링될 때 한 번만 실행
return (
<View style={styles.mapStyle}>
<MapView
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
region={{
latitude: lat,
longitude: long,
latitudeDelta: latDelta,
longitudeDelta: longDelta,
}}
showsUserLocation={showsUserLocation}
userLocationFastestInterval={1000}
userLocationUpdateInterval={1000}
userLocationPriority={'high'}
showsCompass={true}
showsMyLocationButton={false}>
{children}
{potholeLocation &&
potholeLocation.length > 0 &&
potholeLocation.map((location, index) => (
<Marker
key={index} // 각 Marker에 고유한 키를 할당
coordinate={location}
pinColor={RED}
title="Bump Location"
/>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
mapStyle: {
flex: 1,
},
});