Reagieren + Google Maps JS API, dynamisch Marker aus dem Status

Question

In React versuch ich meine Google Map mit Markern bevölkern, wo jeder Marker von einem Array von Objekten in meinem Zustand bestimmt wird. Gerade jetzt, wenn ich ein reduziertes Sites Array von sage 22 Objekten habe, werden nur 1-3 von ihnen als Marker rendern. Dies scheint der Fall zu sein, egal wie viele Objekte sich im Zustand befinden.

Aktualisiert

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

ändern parseInt-parseFloat.

Answer 2

Put <Marker></Marker> Komponente als Kind von Karte und verwenden Sie Ihre Array die Position Eigenschaft festzulegen.

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

Stellen Sie sicher, setState() aufzurufen, wenn die Werte Ihrer Positionen Array zu ändern, so dass jedes Mal Reagieren macht automatisch das DOM ein Wert geändert wird. So erhalten Sie, dass es dynamisch gerendert wird.

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