javascript - 如何显示来自 json 文件的标记列表？

Question

我正在使用 airbnb 制作的包 react-native-maps。这是链接:

https://github.com/airbnb/react-native-maps

当我想在我的 map 上显示标记列表时遇到了问题。我为这样的测试制作了一个 json 文件:

{
    "shop_1": {
        "id": "1",
        "name": "Shop 1",
        "latitude": "48.886674",
        "longitude": "2.210269"
    },
    "shop_2": {
    ...
}

我一直在寻找解释，但我不明白如何使用我的结构使其成为可能。

MapView.Markers 的 API:https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md

map .js

import React, { Component } from 'react';
import Geolocation from '../geolocation/Geolocation';
import Shops from '../shops/Shop';
import {
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';
import styles from './Style';

class Map extends Geolocation {

  constructor(props) {
    super(props);
    this.shops = require('./data/shops.json');
  }

  render() {
    return (
      <View>
        <MapView style={styles.map}
        region={{
          latitude: this.state.position.coords.latitude,
          latitudeDelta: 0.001,
          longitude: this.state.position.coords.longitude,
          longitudeDelta: 0.001
        }}>
          <MapView.Marker coordinate={this.state.position.coords} title="Vous êtes ici !" image={require('./img/initialMarker.png')} />

        </MapView>
        <Shops />
      </View>
    );
  }

}

export default Map;

感谢您的回答。

编辑:Geolocation.js

import React, { Component } from 'react';
import styles from './Style';

class Geolocation extends Component {

    constructor(props) {
        super(props);
        this.state = {
            position : {
                coords: {
                    latitude: 0,
                    longitude: 0
                }
            }
        }
    }

    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({position});
            },
            (error) => alert(error.message),
            {enableHighAccuracy: true, timeout: 20000}
        );
        navigator.geolocation.watchPosition((position) => {
            this.setState({position});
        });
    }
}

export default Geolocation;

Answer 1

首先像这样在构造函数中声明您的商店:

this.state = {
  shops: require('./data/shops.json')
};

然后像这样在 MapView 中循环标记:

{this.state.shops.map(shop => {
  <MapView.Marker coordinate={{latitude: shop.latitude, longitude: shop.longitude}} image={require('./img/initialMarker.png')} />
})}