使用 Expo 不在 MapView 上呈现的标记
Markers not rendering on MapView with Expo
我正在使用 Expo 和 React Native 渲染 MapView
并尝试显示一些基本的 Markers
,但是我什至无法显示默认的。
下面是传递给 sites
的全局状态的数据:
const sampleSiteMarkers = [
{
id: 1,
title: 'Twin Lakes Hidden Spot',
description: 'Beautiful view of Twin Lakes off this hidden forest road.',
coordinate: {
latitude: -106.391015,
longitude: 39.085855
}
},
{
id: 2,
title: 'Lily Lake',
description: 'Nice view of the lilypads in this secluded spot, but a pretty tough road to reach it.',
coordinate: {
latitude: -106.368051,
longitude: 39.351661
}
},
{
id: 3,
title: 'Slide Lake',
description: 'Pretty riverside camping, but a REALLY nasty road to get there.',
coordinate: {
latitude: -106.389204,
longitude: 39.372171
}
}
];
下面是我渲染实际 MapView
的代码。请注意 MapView
渲染良好,但 Markers
本身不会出现。
// 3rd party libraries - core
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MapView} from 'expo';
const {Marker} = MapView;
// 3rd party libraries - additional
import _ from 'lodash';
const SearchMap = ({mapLoaded, lastKnownRegion, updateRegion, sites}) => {
const {fillScreen} = styles;
const renderSites = () => {
// sites I showed at the top of this issue come in fine from props
const renderedSites = _.map(sites, site => {
const {title, description, coordinate, id} = site;
return (
<Marker
key={id}
title={title}
description={description}
coordinate={coordinate}
/>
);
});
// if I inspect renderedSites, I see the Marker element, but it doesn't render
return renderedSites;
};
const renderMap = () => {
return (
<MapView
style={fillScreen}
initialRegion={lastKnownRegion}
onRegionChangeComplete={updateRegion}
rotateEnabled={false}
>
{renderSites()}
</MapView>
)
};
return (
<View style={fillScreen}>
{renderMap()}
</View>
);
};
const styles = StyleSheet.create({
fillScreen: {
flex: 1
}
});
我查看了文档和其他 Whosebug 帖子,但我不明白为什么它无法呈现。
我是不是遗漏了什么明显的东西?提前致谢。
拜托。这很尴尬。
原来我确实错过了一些明显的东西。
我翻转了经度和纬度值。哇。
它应该是这样的,现在渲染得很好。
const sampleSiteMarkers = [
{
id: 1,
title: 'Twin Lakes Hidden Spot',
description: 'Beautiful view of Twin Lakes off this hidden forest road.',
coordinate: {
longitude: -106.391015,
latitude: 39.085855
}
},
{
id: 2,
title: 'Lily Lake',
description: 'Nice view of the lilypads in this secluded spot, but a pretty tough road to reach it.',
coordinate: {
longitude: -106.368051,
latitude: 39.351661
}
},
{
id: 3,
title: 'Slide Lake',
description: 'Pretty riverside camping, but a REALLY nasty road to get there.',
coordinate: {
longitude: -106.389204,
latitude: 39.372171
}
}
];
浪费 5 个多小时真是令人沮丧,我确定我已经检查过了。但是,嘿,如果还有其他人遇到这个问题……双重、三次检查您是否插入了正确的 lat/lng。
我正在使用 Expo 和 React Native 渲染 MapView
并尝试显示一些基本的 Markers
,但是我什至无法显示默认的。
下面是传递给 sites
的全局状态的数据:
const sampleSiteMarkers = [
{
id: 1,
title: 'Twin Lakes Hidden Spot',
description: 'Beautiful view of Twin Lakes off this hidden forest road.',
coordinate: {
latitude: -106.391015,
longitude: 39.085855
}
},
{
id: 2,
title: 'Lily Lake',
description: 'Nice view of the lilypads in this secluded spot, but a pretty tough road to reach it.',
coordinate: {
latitude: -106.368051,
longitude: 39.351661
}
},
{
id: 3,
title: 'Slide Lake',
description: 'Pretty riverside camping, but a REALLY nasty road to get there.',
coordinate: {
latitude: -106.389204,
longitude: 39.372171
}
}
];
下面是我渲染实际 MapView
的代码。请注意 MapView
渲染良好,但 Markers
本身不会出现。
// 3rd party libraries - core
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MapView} from 'expo';
const {Marker} = MapView;
// 3rd party libraries - additional
import _ from 'lodash';
const SearchMap = ({mapLoaded, lastKnownRegion, updateRegion, sites}) => {
const {fillScreen} = styles;
const renderSites = () => {
// sites I showed at the top of this issue come in fine from props
const renderedSites = _.map(sites, site => {
const {title, description, coordinate, id} = site;
return (
<Marker
key={id}
title={title}
description={description}
coordinate={coordinate}
/>
);
});
// if I inspect renderedSites, I see the Marker element, but it doesn't render
return renderedSites;
};
const renderMap = () => {
return (
<MapView
style={fillScreen}
initialRegion={lastKnownRegion}
onRegionChangeComplete={updateRegion}
rotateEnabled={false}
>
{renderSites()}
</MapView>
)
};
return (
<View style={fillScreen}>
{renderMap()}
</View>
);
};
const styles = StyleSheet.create({
fillScreen: {
flex: 1
}
});
我查看了文档和其他 Whosebug 帖子,但我不明白为什么它无法呈现。
我是不是遗漏了什么明显的东西?提前致谢。
拜托。这很尴尬。
原来我确实错过了一些明显的东西。
我翻转了经度和纬度值。哇。
它应该是这样的,现在渲染得很好。
const sampleSiteMarkers = [
{
id: 1,
title: 'Twin Lakes Hidden Spot',
description: 'Beautiful view of Twin Lakes off this hidden forest road.',
coordinate: {
longitude: -106.391015,
latitude: 39.085855
}
},
{
id: 2,
title: 'Lily Lake',
description: 'Nice view of the lilypads in this secluded spot, but a pretty tough road to reach it.',
coordinate: {
longitude: -106.368051,
latitude: 39.351661
}
},
{
id: 3,
title: 'Slide Lake',
description: 'Pretty riverside camping, but a REALLY nasty road to get there.',
coordinate: {
longitude: -106.389204,
latitude: 39.372171
}
}
];
浪费 5 个多小时真是令人沮丧,我确定我已经检查过了。但是,嘿,如果还有其他人遇到这个问题……双重、三次检查您是否插入了正确的 lat/lng。