React + Google Maps JS API，根據狀態動態渲染標記

Question

在React中，我試圖用標記填充Google地圖，其中每個標記都由處於我狀態的對象數組確定。 現在，如果我有一個由22個對象組成的reduceSites數組，則只有1-3個對象將作為標記呈現。 無論有多少個對象處於狀態，似乎都是這種情況。

更新

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更改為parseFloat 。

Answer 2

將<Marker></Marker>組件作為Map的子項，並使用您的數組設置position屬性。

  <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>

確保在更改positions數組的值時調用setState（），以便每次更改值時React自動呈現DOM。 這就是您如何使其動態渲染。

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