使用 react-native-maps 在地图上绘制标记

Question

简而言之，我正在尝试使用 react-native-maps 在地图上绘制标记。

我已经创建了一个操作来从服务器获取坐标和相应的 ID（请参见下面的代码）。

export const getPlacesOnMap = () => {
return dispatch => {
    dispatch(authGetToken())
        .then(token => {
            return fetch("myApp?auth=" + token);
        })
        .catch(() => {
            alert("No valid token found!");
        })
        .then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw(new Error());
            }
        })
        .then(parsedRes => {
            const places = [];
            for (let key in parsedRes) {
                places.push({
                    // ...parsedRes[key], // this fetches all the data
                    latitude: parsedRes[key].location.latitude,
                    longitude: parsedRes[key].location.longitude,
                    id: key
                  });
                } console.log(places)
                dispatch(mapPlaces(places));
              })
        .catch(err => {
            alert("Oops! Something went wrong, sorry! :/");
            console.log(err);
        });
    };
};


export const mapPlaces = places => {
return {
    type: MAP_PLACES,
    places: places
 };
};

我不知道我是否使用了正确的词，但我基本上已经使用 componentWillMount() 测试了代码（上面），它成功地将多个坐标作为对象数组返回。

现在，问题是我不知道下一步该做什么。据我所知，我知道最终目标是创建一个 setState()。但是我不知道怎么去。

如果有人能指出我正确的方向，那将是一个很大的帮助。

Answer 1

您需要创建一个异步操作。您可以根据其中的异步函数是已解析还是已拒绝，在异步操作中分派不同的操作。

export function getPlacesOnMap(token) {
    return async function(dispatch) {
        dispatch({
            type: "FETCHING_PLACES_PENDING"
        });
        fetch("myApp?auth=" + token)
        .then(res => {
            dispatch({
                type: "FETCHING_PLACES_FULFILLED",
                payload: res.json()
            });
        })
        .catch(error => {
            dispatch({
                type: "FETCHING_PLACES_REJECTED",
                payload: error
            });
        });
    };
}

如果您的 authGetToken() 函数也是一个 promise，您需要在 authGetToken() 解析后调度此操作。您可以在减速器的 "FETCHING_PLACES_FULFILLED" 案例中使用 action.payload 以便能够使用检索到的数据。

更新

你的reducer应该是这样的：

export default function reducer(
    state = {
        loadingMarkers : false,
        markers : [],
        error : null,
    },
    action
) {
    switch (action.type) {
        case "FETCHING_PLACES_PENDING":
            return { ...state, loadingMarkers: true };
        case "FETCHING_PLACES_FULFILLED":
            return { ...state, loadingMarkers: false, markers: action.payload};
        case "FETCHING_PLACES_REJECTED":
            return { ...state, loadingMarkers: false, error: action.payload };
        default:
            return state;
    }
}

现在您可以将您的组件连接到 redux 并在获取它们时使用您的标记。

看看this example and connect docs

使用 react-native-maps 在地图上绘制标记

Plotting markers on a map using react-native-maps

javascript

react-native

redux-thunk

react-redux

react-native-maps