コンポーネントにレンダリングしたときにマーカーの位置が間違っています

Question

ReactJを使用してGoogleマップにマーカーを表示しようとしています。

今のところ私は2つの固定場所（ロンドンとパリ）を持っていますが、後で別のコンポーネントで処理するためにサーバーから場所を読み込みたいとします。

何らかの理由で、パリを別のコンポーネントにレンダリングすると、地図の角に置かれます。私は地図を動かすことができます、それをズームするが、パリはまだ角にあります。ここで

私のコードです：

var center = { lat: 49.1951, lng: 16.6068 }; 
var zoom = 3; 

const K_WIDTH = 40; 
const K_HEIGHT = 40; 

const greatPlaceStyle = { 
    // initially any map object has left top corner at lat lng coordinates 
    // it's on you to set object origin to 0,0 coordinates 
    position: 'absolute', 
    width: K_WIDTH, 
    height: K_HEIGHT, 
    left: -K_WIDTH/2, 
    top: -K_HEIGHT/2, 

    border: '5px solid #f44336', 
    borderRadius: K_HEIGHT, 
    backgroundColor: 'white', 
    textAlign: 'center', 
    color: '#3f51b5', 
    fontSize: 16, 
    fontWeight: 'bold', 
    padding: 4 
}; 

class PlaceMarkers extends React.Component{ 
    render(){ 
     return(
      <div style={greatPlaceStyle} lat="48.8566" lng="2.3522">Paris</div> 
     ) 
    } 
} 

class PlaceBlock extends React.Component{ 

    render(){ 

     return(
      <div> 
       <div className="thumbnail ep-map"> 
        <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
        <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div> 
        <PlaceMarkers/> 
        </GoogleMap> 
       </div> 
      </div> 
    ) 
} 

、それは非常に単純なものであるかもしれないので、私はReactJsに非常に新しいですか？

編集：Maxへ

おかげで私はいくつかの変更を加えました。今では私のマーカーはサーバーからロードされても機能します（GETのためにAxiosを使用します）。代わりに、私はGoogleMapBlockに私のコンポーネントの名前を変更し、それがマーカーを含む地図を任せてきた別のコンポーネントとして各マーカーを有するので：

class GoogleMapBlock extends React.Component{ 

    constructor(props) { 
     super(props); 

     this.state = { 
      markers: [] 
     }; 
    } 

    componentDidMount() { 
     axios 
     .get(getBaseUrl()+`get`) 
     .then((response) => { 
      this.setState({ 
       markers: response.data.markers 
      }); 
     }) 
     .catch((e) => 
     { 
      console.error(e); 
     }); 
    } 

    render(){ 

     var myMarkers = []; 
     var count = 1; 
     this.state.markers.forEach(function(marker){ 
      var markerId = "markerId" + count;//marker.key 
      myMarkers.push(
       <div id={markerId} style={greatPlaceStyle} lat={marker.position.lat} lng={marker.position.lng}>{marker.title}</div> 
      ); 
      count++; 
     }); 

     return(
       <div className="thumbnail ep-map"> 
        <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
        {myMarkers} 
        </GoogleMap> 
       </div> 
      ); 
    } 
} 

Answer 1

Googleマップコンポーネントは、それの子コンポーネントの下に緯度とLNG小道具を期待するためです。緯度とLNG 付きのdiv - - （緯度とLNGとのdivを持っている）緯度とLNGのないPlaceMarkers

あなたがする必要がある ：あなたが反応するのdevのツールを見ると、あなたは、Googleマップの下の2つのコンポーネントがあることがわかります明示的PlaceMarkersのための緯度とLNG小道具を設定します。

<GoogleMap defaultCenter={center} defaultZoom={zoom}> 
    <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div> 
    <PlaceMarkers lat="48.8566" lng="2.3522"/> 
</GoogleMap> 

は、私たちが小道具を必要とする理由です、（それはまだビューステートを持っているかもしれませんが）ので、それはデータを格納するために使用すべきではない、コンポーネント図であるリアクト - コンポーネントを初期化しますデータと一緒に。あなたのケースでは、私はReduxのように、ストレージ・フレームワークを選択することをお勧めし、実行時にコンポーネントを初期化：

render() { 
    let markers = this.state.markers.map(m => <PlaceMarkers {...m}/>); 

    return <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
      {markers} 
     </GoogleMap> 
} 

、this.state.markersは[{LATのような配列です： "48.8566"、LNG： "2.3522" 、名前： "London"}、...]