Question

背景：我正在一个较大的网页中构建一个小地图组件，该网页正在做出反应以显示某个位置周围的区域。

问题：我遇到了以下组件将检索所需的磁贴（我可以在网络使用中看到它），创建组件，然后在270x0中渲染地图，使其不可见的问题。下面是我用于组件的代码。

我尝试过：如果我手动将组件的大小调整为270x250，我可以看到后台UI和行为正常工作并正确渲染。我已经确认库提取的图块与所请求的区域相关，并且我的密钥正常工作。我还尝试（简要地）将地图渲染作为脚本导入到反应并运行它，但是这样做很糟糕，我真的不愿意这样解决问题。

作为参考，我将离开this tutorial here我正在适应做出反应。

 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>
      );
    }
  });

谢谢！

更新：当我手动重新调整此API地图容器的画布大小（从其原始大小270x1）时，我可以显示要显示的顶行图块。我的预感只是显示最高的那些，因为它最初只有一个像素高。

Answer 1

我能够通过设置像素高度和默认位置 - 静态来解决这个问题。

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

这里Javascript地图库没有渲染

1 个答案: