Hier Javascript Map-Bibliothek nicht Rendering

Question

Hintergrund: Ich baue eine kleine Karte Komponente in einer größeren Webseite, die reagiert, um einen Bereich um einen Ort anzuzeigen.

Problem: Ich habe ein Problem, wo die folgende Komponente die erforderlichen Kacheln abrufen (ich kann es in der Netzwerknutzung sehen), erstellen Sie die Komponente, und rendern Sie dann die Karte in 270 x 0, so dass es nicht sichtbar . Unten ist der Code, den ich für die Komponente verwende.

Was ich versucht habe: Wenn ich die Komponente manuell auf 270x250 Größe ändern, kann ich sehen, dass die Benutzeroberfläche und das Verhalten des Hintergrunds ordnungsgemäß funktionieren und ordnungsgemäß gerendert werden. Ich habe bestätigt, dass die Kacheln, die die Bibliothek zieht, für den angeforderten Bereich relevant sind und meine Schlüssel ordnungsgemäß funktionieren. Ich habe auch versucht (kurz) den Map-Render als Script zu importieren, um zu reagieren und ihn auszuführen, aber das ging schlecht und ich würde es wirklich vorziehen, das Problem nicht so anzugehen.

Als Referenz gehe ich von this tutorial here, die ich anpassen, um reagieren zu sein.

var Map = React.createClass({ 
    propTypes: { 
     target: React.PropTypes.string.isRequired 
    }, 

    componentDidMount: function() { 
     var platform = new H.service.Platform({ 
         app_id: keys.app_id, 
         app_code: keys.app_code, 
         useCIT: true, 
         useHTTPS: true 
         }); 

     var defaultLayers = platform.createDefaultLayers(); 
     var map = new H.Map(document.getElementById('map'), 
          defaultLayers.normal.map,{ 
          center: {lat:this.props.target.lat, 
            lng:this.props.target.long}, 
          zoom: 13 
          }); 

     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
     var ui = H.ui.UI.createDefault(map, defaultLayers); 
    }, 

    render: function() { 
     return (
     <div> 
      <p>Location</p> 
      <div id="map" styles="position:absolute; width:49%; height:100%; background:grey"/> 
     </div> 
    ); 
    } 
    }); 

Vielen Dank!

Update: Wenn ich manuell die Leinwand des hier API-Kartencontainers (von seiner ursprünglichen Größe von 270 x 1) Größe, kann ich die oberste Reihe von Kacheln angezeigt werden. Meine Vermutung ist, dass nur die Besten angezeigt werden, weil sie ursprünglich nur so groß wie ein Pixel sind.

Answer 1

Ich konnte dies lösen, indem Höhe in Pixeln und mit Standardposition - statisch.

<div id="map" styles="width:500px; height:100%; background:grey"/>