React + GoogleマップJS APIは、状態からマーカーを動的にレンダリングします

Question

Reactでは、私の状態のオブジェクトの配列によって各マーカーが決定されるマーカーをGoogleマップに挿入しようとしています。現在、22個のオブジェクトのreducedSites配列がある場合、そのうちの1〜3個だけがマーカーとしてレンダリングされます。これは、どれくらいのオブジェクトが状態にあっても同じように見えます。

は、地図の子として<Marker></Marker>コンポーネントを配置し、positionプロパティを設定するために、あなたの配列を使用し

renderMap() { 
    const map = document.querySelector('#map') 
    this.map = new google.maps.Map(map, { 
     center: { lat: this.state.lat, lng: this.state.lng }, 
     zoom: 8 
    }); 
    const _this = this 
    let markers = this.state.reducedSites.map(function(site) { 
     return new google.maps.Marker({ 
     position: {lat: parseInt(site.latitude), lng: parseInt(site.longitude)}, 
     map: _this.map 
     }); 
    }); 
    } 

Answer 1

変更parseInt。

Answer 2

を更新しました。

<Map google={this.props.google} 
     style={{width: '100%', height: '100%', position: 'relative'}} 
     className={'map'} 
     zoom={14}> 
     <Marker 
     name={'SOMA'} 
     position={{lat: this.state.markersArray[0].lat, lng: this.state.markersArray[0].lng}} /> 
    </Marker> 
    </Map> 

あなたの位置の配列の値を変更する場合）SETSTATEを（呼び出していることを確認しますので、自動的に反応することがDOMに値が変更されるたびにレンダリングします。これは動的にレンダリングする方法です。 parseFloatへ

https://github.com/fullstackreact/google-maps-react