问题是当Map被加载时,纬度和经度仍然是空的。然后页面崩溃。加载带有LAT和LNG的变量需要一些秒。但是我不知道如何让Map等待纬度和经度被加载。
我尝试在Map中使用三元,但不起作用
export default function GeolocationMap() {
const paseadores = useSelector((state) => state.paseadores)
const dispatch = useDispatch();
const { user, isAuthenticated } = useAuth0();
let usuarioIdRaro = ""
let id = ""
if (isAuthenticated) {
usuarioIdRaro = user.sub
id = usuarioIdRaro.substring(6)
}
useEffect(() => {
dispatch(getDetalleUsuario(id));
dispatch(getusers())
dispatch(getpaseadores())
}, []);
const contratadosPor = paseadores.filter(({ contratadoPor }) => contratadoPor === id)
const latitude = contratadosPor && contratadosPor.length > 0 ? contratadosPor.map(({ lat }) => lat) : null;
const longitude = contratadosPor && contratadosPor.length > 0 ? contratadosPor.map(({ lng }) => lng): null;
console.log("latlng", latitude)
console.log("latlng", longitude)
useEffect(() => {
const interval = setInterval(() => {
dispatch(getpaseadores())
}, 1500);
return () => clearInterval(interval);
}, [])
/////////////////////////////////////////////////////////////////////////////
function FlyMapTo() {
const map = useMap()
useEffect(() => {
map.flyTo(position)
}, {enableHighAccuracy: true})
return null
}
//////////////////////////////////////////////////////////////////////////////////
const position = latitude && longitude ? [latitude, longitude] : null;
////////////////////////////////////////////////////////////////// ///////////////
return (
<div className={stl.paginaGps}>
<NavBar />
<div className={stl.titulo}>Aqui podras ver la ubicacion del paseador en tiempo real</div>
<div className={stl.paseador}>
<MapContainer center={position} zoom={16}>
<FlyMapTo />
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker
position={position}
icon={IconLocationWalker}>
<Popup>El Paseador se encuentra Aqui</Popup>
</Marker>
</MapContainer>
</div>
<Footer />
</div>
);
}
3条答案
按热度按时间ztigrdn81#
您只需要检查
latitude
和longitude
变量,如果它们是null
,则显示“Loading”组件。当值加载到存储中时,React组件将重新呈现,因为您是从存储中选择
paseadores
变量的。它应该是这样的:
这将不会加载逻辑的其余部分,直到lat和long被加载并且不为空。
fdbelqdn2#
我得到这个错误仍然:
xt0899hw3#
我已经修复了它。我只是在一个数组中弄错了纬度和经度。所以我只需要字符串。所以我这样做了,工作很好