更新

Question

在React中，我尝试使用标记填充我的Google地图，其中每个标记由我所在州的一系列对象确定。现在，如果我有一个说22个对象的reducedSite数组，其中只有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>

确保在更改位置数组的值时调用setState（），以便每次更改值时React都会自动呈现DOM。这就是你动态渲染的方法。

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

React + Google Maps JS API，从状态动态渲染标记

更新

2 个答案: