没有在 MapView 上使用 Expo 渲染的标记答案

【问题标题】：Markers not rendering on MapView with Expo没有在 MapView 上使用 Expo 渲染的标记
【发布时间】：2018-03-02 23:30:10
【问题描述】：

我正在使用 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
    }
});

我查看了文档和其他 StackOverflow 帖子，但我无法弄清楚为什么它不会呈现。

我是否遗漏了一些明显的东西？提前致谢。

【问题讨论】：

标签： react-native expo react-native-maps

【解决方案1】：

韦尔普。这很尴尬。

原来我确实错过了一些明显的东西。

我翻转了经度和纬度值。哇。

它应该是这样的，现在渲染得很好。

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 个多小时，真是令人沮丧，我确信我已经检查过了。但是，嘿，如果其他人遇到这个......双重，三重检查你是否插入了正确的纬度/经度。

【讨论】：