|
|
@@ -20,9 +20,7 @@ export default function MapView() {
|
|
|
const [places, setPlaces] = useState<Place[]>([])
|
|
|
const [selectedPlace, setSelectedPlace] = useState<Place | null>(null)
|
|
|
const [mapError, setMapError] = useState(false)
|
|
|
- const userRef = useRef(user)
|
|
|
- userRef.current = user
|
|
|
- const userPosRef = useRef<{ lat: number; lng: number } | null>(null)
|
|
|
+ const [userPos, setUserPos] = useState<{ lat: number; lng: number } | null>(null)
|
|
|
|
|
|
const fetchPlaces = useCallback(async (bounds?: MapBounds) => {
|
|
|
try {
|
|
|
@@ -55,14 +53,8 @@ export default function MapView() {
|
|
|
if (navigator.geolocation) {
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
|
(pos) => {
|
|
|
- const lat = pos.coords.latitude
|
|
|
- const lng = pos.coords.longitude
|
|
|
- userPosRef.current = { lat, lng }
|
|
|
- provider.setCenter(lat, lng)
|
|
|
- provider.addMarker('_user_location', lat, lng, {
|
|
|
- type: 'location',
|
|
|
- color: userRef.current ? '#FF4B4B' : '#FFF82A',
|
|
|
- })
|
|
|
+ setUserPos({ lat: pos.coords.latitude, lng: pos.coords.longitude })
|
|
|
+ provider.setCenter(pos.coords.latitude, pos.coords.longitude)
|
|
|
},
|
|
|
() => {},
|
|
|
)
|
|
|
@@ -85,16 +77,15 @@ export default function MapView() {
|
|
|
}, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- const pos = userPosRef.current
|
|
|
const provider = mapRef.current
|
|
|
- if (!pos || !provider || !provider.isReady()) return
|
|
|
+ if (!userPos || !provider || !provider.isReady()) return
|
|
|
|
|
|
provider.removeMarker('_user_location')
|
|
|
- provider.addMarker('_user_location', pos.lat, pos.lng, {
|
|
|
+ provider.addMarker('_user_location', userPos.lat, userPos.lng, {
|
|
|
type: 'location',
|
|
|
color: user ? '#FF4B4B' : '#FFF82A',
|
|
|
})
|
|
|
- }, [user])
|
|
|
+ }, [userPos, user])
|
|
|
|
|
|
useEffect(() => {
|
|
|
const provider = mapRef.current
|