React Native Maps for Web IOS 和 Android

Question

适用于所有平台且协同工作的最佳 React 本机地图是什么？

我正在使用博览会尝试使用这个：https://docs.expo.dev/versions/latest/sdk/map-view/

但是当我这样做时它破坏了我的整个项目？

Answer 1

我也使用了“react-native-maps”，它在 iOS 和 Android 上与 Expo 配合得很好。据我所知，这是你最好的世博会选择。

这是我的设置方式（请随意忽略上下文位 - 只是想展示绘图功能）：

import React, { useContext } from 'react';
import {Text, StyleSheet, ActivityIndicator} from 'react-native';
import MapView, { Polyline, Circle } from 'react-native-maps';
import {Context as LocationContext} from "../context/LocationContext";


const Map = () => {
    const { state: { currentLocation, locations }} = useContext(LocationContext);
    if(!currentLocation)
        return <ActivityIndicator size="large" style={styles.activityIndicator}/>;
    return <>
        <MapView 
            style={styles.map}
            initialRegion={{
                ...currentLocation.coords,
                latitudeDelta: 1,
                longitudeDelta:1,
            }}
        >
            <Circle 
                center= {currentLocation.coords}
                radius= {2000}
                color="rgba(158, 158, 255, 1.0)"
                fillColor="rgba(158, 158, 255, 0.3)"
            />
             <Polyline 
                coordinates={ locations.map((item) => item.coords )}
                lineDashPattern={[1, 0]}
            />
        </MapView>
    </>
};

const styles = StyleSheet.create({
    map:{
        height: 300,
    },
    activityIndicator:{
        marginTop: 200
    }
});

export default Map;

React Native Maps for Web IOS 和 Android

React Native Maps for Web IOS and Android

reactjs

react-native

react-native-maps