React-Google-Maps是一个基于React框架的Google地图组件库,它提供了在React应用中集成Google地图的便捷方式。Redux是一个用于JavaScript应用程序状态管理的库,它可以帮助我们在应用中管理和共享数据。
在使用React-Google-Maps和Redux异步显示标记的过程中,我们可以按照以下步骤进行操作:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import { fetchMarkers } from './actions/markersActions';
actions/markersActions.js
文件中,可以定义一个fetchMarkers
函数来异步获取标记数据:export const fetchMarkers = () => {
return async (dispatch) => {
try {
// 异步获取标记数据的逻辑
const markers = await fetch('https://api.example.com/markers');
const data = await markers.json();
// 将获取到的标记数据传递给Redux store
dispatch({ type: 'FETCH_MARKERS_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_MARKERS_ERROR', payload: error.message });
}
};
};
reducers/markersReducer.js
文件中,可以定义一个markersReducer
函数来处理标记数据的状态变化:const initialState = {
markers: [],
loading: false,
error: null,
};
const markersReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_MARKERS_SUCCESS':
return {
...state,
markers: action.payload,
loading: false,
error: null,
};
case 'FETCH_MARKERS_ERROR':
return {
...state,
markers: [],
loading: false,
error: action.payload,
};
default:
return state;
}
};
export default markersReducer;
useDispatch
和useSelector
钩子来分发Redux action和获取标记数据:const MapContainer = () => {
const dispatch = useDispatch();
const markers = useSelector((state) => state.markers.markers);
const loading = useSelector((state) => state.markers.loading);
const error = useSelector((state) => state.markers.error);
useEffect(() => {
dispatch(fetchMarkers());
}, [dispatch]);
const GoogleMapComponent = withGoogleMap(() => (
<GoogleMap defaultCenter={{ lat: 0, lng: 0 }} defaultZoom={10}>
{markers.map((marker) => (
<Marker key={marker.id} position={{ lat: marker.lat, lng: marker.lng }} />
))}
</GoogleMap>
));
return (
<div>
{loading ? (
<p>Loading...</p>
) : error ? (
<p>Error: {error}</p>
) : (
<GoogleMapComponent
containerElement={<div style={{ height: '400px', width: '100%' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
)}
</div>
);
};
在上述代码中,我们首先使用useDispatch
钩子获取dispatch函数,然后使用useSelector
钩子获取标记数据、加载状态和错误信息。在组件挂载时,我们通过dispatch(fetchMarkers())
来触发异步获取标记数据的action。最后,我们使用withGoogleMap
高阶组件创建一个包含标记的Google地图组件,并根据标记数据动态渲染标记。
这样,当组件渲染时,它会根据Redux store中的标记数据来显示地图上的标记。同时,我们还处理了加载状态和错误信息,以提供更好的用户体验。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/tianditu)
领取专属 10元无门槛券
手把手带您无忧上云