[英]How to map multiple Markers from lat,long array in react native
To get the coordinate array, I used the answer from here为了得到坐标数组,我使用了这里的答案
it allows me to make an array with {"lat":any "lon":any}它允许我用 {"lat":any "lon":any} 创建一个数组
I'm trying to make a loop where I can mark every lat and lon, I tried this我正在尝试制作一个可以标记每个纬度和经度的循环,我试过这个
{LatLongArray.map((LatLongArray,index) => {
return (
<MapView.Marker
key = {index}
coordinate = {{ LatLongArray}}
>
</MapView.Marker>
);
})}
But I get the error that the lat and lon value is undefined I also get the error that each child component should have a unique key.但是我得到纬度和经度值未定义的错误我也得到每个子组件应该有一个唯一键的错误。
The loop is inside a MapView component循环位于 MapView 组件内
Help would be appriciated thanks.帮助将不胜感激。
here are the Error and stacktrace.这是错误和堆栈跟踪。
[Mon Feb 01 2021 11:38:27.890] ERROR Warning: Failed prop type: The prop `coordinate.latitude` is marked as required in `MapMarker`, but its value is `undefined`.
MapMarker@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:127169:36
in AirportMap (at HomeScreen.js:16)
in RCTView (at View.js:34)
in View (at SafeAreaView.js:41)
in ForwardRef(SafeAreaView) (at HomeScreen.js:15)
in HomeScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:620)
in RCTView (at View.js:34)
in View (at Screens.tsx:84)
in MaybeScreen (at CardStack.tsx:613)
in RCTView (at View.js:34)
in View (at Screens.tsx:54)
in MaybeScreenContainer (at CardStack.tsx:495)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at GestureHandlerRootView.android.js:26)
in GestureHandlerRootView (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at DrawerNavigationRoutes.js:23)
in homeScreenStack (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:68)
in RCTView (at View.js:34)
in View (at ResourceSavingScene.tsx:63)
in ResourceSavingScene (at DrawerView.tsx:183)
in RCTView (at View.js:34)
in View (at src/index.native.js:123)
in ScreenContainer (at DrawerView.tsx:162)
in RCTView (at View.js:34)
in View (at Drawer.tsx:645)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:638)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:628)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Drawer.tsx:619)
in DrawerView (at DrawerView.tsx:215)
in SafeAreaProviderCompat (at DrawerView.tsx:213)
in RCTView (at View.js:34)
in View (at GestureHandlerRootView.android.js:26)
in GestureHandlerRootView (at DrawerView.tsx:212)
in DrawerView (at createDrawerNavigator.tsx:47)
in DrawerNavigator (at DrawerNavigationRoutes.js:76)
in DrawerNavigatorRoutes (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:620)
in RCTView (at View.js:34)
in View (at Screens.tsx:84)
in MaybeScreen (at CardStack.tsx:613)
in RCTView (at View.js:34)
in View (at Screens.tsx:54)
in MaybeScreenContainer (at CardStack.tsx:495)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:455)
in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
in GestureHandlerRootView (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at App.js:44)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:42)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
I fixed the problem it was pretty easy我解决了这个问题,这很容易
Since the react-native-maps api takes "latitude" and longitude" as keys in the array.由于 react-native-maps api 将“纬度”和“经度”作为数组中的键。
I replaced all the "lat" and "lon" and it plots all the airports.我替换了所有的“lat”和“lon”,它绘制了所有的机场。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.