如何顯示來自json文件的標記列表？

我正在使用airbnb製作的packages-react-native-maps。這裏是鏈接：如何顯示來自json文件的標記列表？

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

而且我有一個問題，當我想在我的地圖顯示標記的列表。我做了測試那樣的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;

來源

2016-12-05 Jeremy Delhaie

你在哪裏設置'this.state.position.coords'？ –

在另一個名爲Geolocation.js的文件中，它用於我的實際位置。我更新了我的問題 –

我已經更新了我的答案。告訴我它是否有效？ :) –

首先把你的店陳述中構造這樣的：

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')} /> 
})}

來源

2016-12-05 14:10:45

如何顯示來自json文件的標記列表？

回答

相關問題