反応を使って地図を描く方法

Question

私は反応を使って地図を作成する必要があります。異なる高度を持つ複数のオブジェクトがあります。しかし、私はどのように単一のページに各オブジェクトの複数のマップを描画するのか分からない。それを行う方法を教えてもらえますか？簡単な例が大きなプラスになります

Answer 1

React docs on listsを読んでください。レンダリング時にオブジェクトをマップ/反復処理する必要があります。ここで

class Application extends React.Component { 
    render() { 
    const mapData = [{a: 123,},{a:345}]; //Your map data 
    return <div> 
     {mapData.map((data)=>{ 
     ///Render your maps 
     return <div>{data.a}</div> 
     })} 
    </div>; 
    } 
} 

https://codepen.io/anon/pen/XRRzxy

Answer 2

偉大なコンポーネントbuilt for React

使用例

import React, { Component } from 'react'; 
import GoogleMapReact from 'google-map-react'; 

const AnyReactComponent = ({ text }) => <div>{text}</div>; 

class SimpleMap extends Component { 
    static defaultProps = { 
    center: {lat: 59.95, lng: 30.33}, 
    zoom: 11 
    }; 

    render() { 
    return (
     <GoogleMapReact 
     defaultCenter={this.props.center} 
     defaultZoom={this.props.zoom} 
     > 
     <AnyReactComponent 
      lat={59.955413} 
      lng={30.337844} 
      text={'Kreyser Avrora'} 
     /> 
     </GoogleMapReact> 
    ); 
    } 
} 

ある